javascript - 如何在 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" },
    ],
  },
]; 

标签： javascriptarraysreactjs

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));