How to format the JSON Structure in ReactJs

Question

I have the json Structure as per the following example

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" },
];

But here Airline Name comes Dynamically we need to separate the JSON as by the Expected Array format

i need to change the above Json as by the Airline expected Json Structure is given below

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" },
    ],
  },
];

Raeesaa · Accepted Answer · 2021-02-08 08:10:12Z

You can write a simple function for iterating through JSON and building expected array. Sample code:

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

Viet · Accepted Answer · 2021-02-08 08:18:15Z

You can construct the expectedArr like so:

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

Loop through items in the arr, if the item doesn't exist in the expectedArr, push it. Otherwise, update the existed value's Details with the item's details

CarlJdP · Accepted Answer · 2021-02-08 12:50:58Z

This is perhaps a more generic approach to your question, handled in two steps:

Reduce to a Map of key value pairs for each 'Airline' (similar to @Kumar's answer)
Remap those key value pairs back to an Array with the structure you want e.g. '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)

Kumar · Accepted Answer · 2021-02-08 08:21:02Z

You can reduce the array to an object

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

Collectives™ on Stack Overflow

How to format the JSON Structure in ReactJs

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related