如何在ReactJs中格式化JSON结构

Question

我有如下示例所示的json结构

const arr = [
{ Airline: "Goair", Departure: "01:50", Price: "8,007.00" },
{ Airline: "Air india", Departure: "03:40", Price: "8,735.00" },
{ Airline: "Indigo", Departure: "06:15", Price: "7,165.00" },
{ Airline: "Indigo", Departure: "07:25", Price: "7,401.00" },
{ Airline: "Air india", Departure: "08:15", Price: "50,078.00" },
{ Airline: "Goair", Departure: "09:00", Price: "7,401.00" },
{ Airline: "Air india", Departure: "04:15", Price: "5,078.00" },
{ Airline: "Goair", Departure: "19:00", Price: "7,401.00" },
];

但这里的航空公司名称是动态的，我们需要按照预期数组格式来分隔JSON

我需要把上面的Json改成航空公司的预期的Json结构在下面给出

const expectedArr = [
{
Airline: "Goair",
Details: [
{ Departure: "01:50", Price: "8,007.00" },
{ Departure: "09:00", Price: "7,401.00" },
{ Departure: "19:00", Price: "7,401.00" },
],
},
{
Airline: "Air india",
Details: [
{ Departure: "03:40", Price: "8,735.00" },
{ Departure: "08:15", Price: "50,078.00" },
{ Departure: "04:15", Price: "5,078.00" },
],
},
{
Airline: "Indigo",
Details: [
{ Departure: "06:15", Price: "7,165.00" },
{ Departure: "07:25", Price: "7,401.00" },
],
},
]; 

Answer 1

您可以编写一个简单的函数来迭代JSON并构建期望的数组。样本代码：

let data = [
{ Airline: "Goair", Departure: "01:50", Price: "8,007.00" },
{ Airline: "Air india", Departure: "03:40", Price: "8,735.00" },
{ Airline: "Indigo", Departure: "06:15", Price: "7,165.00" },
{ Airline: "Indigo", Departure: "07:25", Price: "7,401.00" },
{ Airline: "Air india", Departure: "08:15", Price: "50,078.00" },
{ Airline: "Goair", Departure: "09:00", Price: "7,401.00" },
{ Airline: "Air india", Departure: "04:15", Price: "5,078.00" },
{ Airline: "Goair", Departure: "19:00", Price: "7,401.00" },
];
const formatJSON = (data) => {
let result = [];

data.forEach((item) => {
let existingItem = result.find((elem) => elem.Airline === item.Airline);

if(existingItem) {
existingItem.Details.push({
Departure: item.Departure,
Price: item.Price
})
} else {
result.push({
Airline: item.Airline,
Details: [{
Departure: item.Departure,
Price: item.Price
}]
})
}
});
return result;
}
console.log(formatJSON(data));

Answer 2

您可以构造预期的Arr，如下所示：

const expectedArr = [];
const arr = [
{ Airline: "Goair", Departure: "01:50", Price: "8,007.00" },
{ Airline: "Air india", Departure: "03:40", Price: "8,735.00" },
{ Airline: "Indigo", Departure: "06:15", Price: "7,165.00" },
{ Airline: "Indigo", Departure: "07:25", Price: "7,401.00" },
{ Airline: "Air india", Departure: "08:15", Price: "50,078.00" },
{ Airline: "Goair", Departure: "09:00", Price: "7,401.00" },
{ Airline: "Air india", Departure: "04:15", Price: "5,078.00" },
{ Airline: "Goair", Departure: "19:00", Price: "7,401.00" }
];
for (let i = 0; i < arr.length; i++) {
const existedIndex = expectedArr.findIndex(
(item) => item.Airline === arr[i].Airline
);
if (existedIndex !== -1) {
expectedArr[existedIndex].Details.push({
Departure: arr[i].Departure,
Price: arr[i].Price
});
} else {
expectedArr.push({
Airline: arr[i].Airline,
Details: [
{
Departure: arr[i].Departure,
Price: arr[i].Price
}
]
});
}
}
console.log(expectedArr);

循环arr中的项目，如果预期的arr中不存在该项目，则推送它。否则，用项目的详细信息更新现有值的Details

Answer 3

这可能是解决问题的一种更通用的方法，分两步处理：

• 简化为每个"航空公司"的键值对映射(类似于@Kumar的回答)
• 将这些键值对重新映射回具有所需结构的数组，例如"Airline"、"Details">

const originalArray = [
{ Airline: "Goair", Departure: "01:50", Price: "8,007.00" },
{ Airline: "Air india", Departure: "03:40", Price: "8,735.00" },
{ Airline: "Indigo", Departure: "06:15", Price: "7,165.00" },
{ Airline: "Indigo", Departure: "07:25", Price: "7,401.00" },
{ Airline: "Air india", Departure: "08:15", Price: "50,078.00" },
{ Airline: "Goair", Departure: "09:00", Price: "7,401.00" },
{ Airline: "Air india", Departure: "04:15", Price: "5,078.00" },
{ Airline: "Goair", Departure: "19:00", Price: "7,401.00" },
];
function mapByProperty(arrayOfObjects, property) {
return arrayOfObjects.reduce( (accumulator, item) => {
const propValue = item[property]
Reflect.deleteProperty(item, property)
return accumulator.set(propValue, (accumulator.get(propValue) || []).concat(item))
}, new Map())
}

function mapToArrayOfObjects(map, keyPropertyName, valuePropertyName) {
let array = []
for (let [key, value] of map) {
array.push({[keyPropertyName]:key, [valuePropertyName]:value})
}
return array
}
const mappedByProperty = mapByProperty(originalArray, 'Airline')
const result = mapToArrayOfObjects(mappedByProperty, 'Airline', 'Details')
console.log(result)

Answer 4

您可以将数组缩减为对象

const arr = [
{ Airline: "Goair", Departure: "01:50", Price: "8,007.00" },
{ Airline: "Air india", Departure: "03:40", Price: "8,735.00" },
{ Airline: "Indigo", Departure: "06:15", Price: "7,165.00" },
{ Airline: "Indigo", Departure: "07:25", Price: "7,401.00" },
{ Airline: "Air india", Departure: "08:15", Price: "50,078.00" },
{ Airline: "Goair", Departure: "09:00", Price: "7,401.00" },
{ Airline: "Air india", Departure: "04:15", Price: "5,078.00" },
{ Airline: "Goair", Departure: "19:00", Price: "7,401.00" },
];
const result = arr.reduce((acc, item) => {
const {Departure, Price} = item;
if(acc.hasOwnProperty(item['Airline'])){
acc[item['Airline']]['Details'].push({Departure, Price});
} else {
acc[item['Airline']]  = {Details: [{Departure, Price}]};
}
return acc;
}, {})
console.log(result);