covert my json Array to my json structure in reactjs

Question

I get the data from Backend which is given below. and have to manipulate the data as per the requirement. how to convert the following JSON Array format as per the requirement in ReactJS. the Json Data given below

[
    {
      "date": "2020-12-10",
      "airline": "Air asia",
      "totalprice": 4180,
      "departuretime": "20:25"
    },
    {
      "date": "2020-12-10",
      "airline": "Air asia",
      "totalprice": 4180,
      "departuretime": "11:25"
    },
    {
      "date": "2020-12-10",
      "airline": "Air asia",
      "totalprice": 4180,
      "departuretime": "22:45"
    },
    {
      "date": "2020-12-10",
      "airline": "Air india",
      "totalprice": 4180,
      "departuretime": "06:10",
    },
    {
      "date": "2020-12-10",
      "airline": "Air india",
      "totalprice": 4180,
      "departuretime": "13:50",
    },
    {
      "date": "2020-12-10",
      "airline": "Air india",
      "totalprice": 4180,
      "departuretime": "07:05",
    }
]

convert the above data as per the following data

[
  {
    "airline": "Air asia",
    "data": [
      {
        "date": "2020-12-10",
        "totalprice": 5180,
        "departuretime": "20:25"
      },
      {
        "date": "2020-12-10",
        "totalprice": 4180,
        "departuretime": "11:25"
      },
      {
        "date": "2020-12-10",
        "totalprice": 4180,
        "departuretime": "22:45"
      }
    ]
  },
  {
    "airline": "Air india",
    "data": [
      {
        "date": "2020-12-10",
        "totalprice": 4180,
        "departuretime": "06:10"
      },
      {
        "date": "2020-12-10",
        "totalprice": 4180,
        "departuretime": "13:50"
      },
      {
        "date": "2020-12-10",
        "totalprice": 4180,
        "departuretime": "07:05"
      }
    ]
  }
]

How to convert the by the Javascript method ?

What have you tried? Have you tried reading array methods?

Shubham Verma
– Shubham Verma

2020-12-14 06:53:02 +00:00
Commented Dec 14, 2020 at 6:53 — Shubham Verma
– Shubham Verma, Commented Dec 14, 2020 at 6:53

Ketan Ramteke · Accepted Answer · 2020-12-14 07:10:39Z

let data = [
{
  "date": "2020-12-10",
  "airline": "Air asia",
  "totalprice": 4180,
  "departuretime": "20:25"
},
{
  "date": "2020-12-10",
  "airline": "Air asia",
  "totalprice": 4180,
  "departuretime": "11:25"
},
{
  "date": "2020-12-10",
  "airline": "Air asia",
  "totalprice": 4180,
  "departuretime": "22:45"
},
{
  "date": "2020-12-10",
  "airline": "Air india",
  "totalprice": 4180,
  "departuretime": "06:10",
},
{
  "date": "2020-12-10",
  "airline": "Air india",
  "totalprice": 4180,
  "departuretime": "13:50",
},
{
  "date": "2020-12-10",
  "airline": "Air india",
  "totalprice": 4180,
  "departuretime": "07:05",
}
]
// use can use this object as it is too.
let sol = {}
data.forEach(d => {
  if(sol[d.airline]){
sol[d.airline].data.push({"date": d.date, "totalprice": d.totalprice, "departuretime": d.departuretime})
  }else{
sol[d.airline] = {"data" : [{"date": d.date, "totalprice": d.totalprice, "departuretime": d.departuretime}]}
  }
})

let d = Object.keys(sol).map(key => {
  return {"airline": key, "data": sol[key]["data"]}
})

console.log(d)

Elie · Accepted Answer · 2020-12-14 07:23:05Z

0

You can use the reduce function to solve this. See below:

const airlinesReducer = (accumulator, current) => {
  // Breakdown the entry into name and other fields
  let { airline, ...airlineFields} = current;

  // Look for a previously indexed entry
  let airlineData = accumulator.indexed[airline]
  
  // If the airline hasn't been indexed before, add it to the index map
  if (!airlineData) {
    // Create a reference for the new array to be filled
    airlineData = accumulator.indexed[airline] = []
    accumulator.result.push({
      airline: current.airline,
      data: airlineData
    })
  } 
  
  // Push this entry to the results array
  airlineData.push(airlineFields)
  return accumulator
}

let result = array.reduce(airlinesReducer, { indexed: {}, result: [] }).result

answered Dec 14, 2020 at 7:23

Elie

7,4538 gold badges33 silver badges35 bronze badges

2 Comments

Elie Over a year ago

Why is it overkill?

AKX Over a year ago

Coincidentally there's a tweet... twitter.com/dan_abramov/status/1338253118199508992

AKX · Accepted Answer · 2020-12-14 07:28:57Z

const input = [{"date":"2020-12-10","airline":"Air asia","totalprice":4180,"departuretime":"20:25"},{"date":"2020-12-10","airline":"Air asia","totalprice":4180,"departuretime":"11:25"},{"date":"2020-12-10","airline":"Air asia","totalprice":4180,"departuretime":"22:45"},{"date":"2020-12-10","airline":"Air india","totalprice":4180,"departuretime":"06:10"},{"date":"2020-12-10","airline":"Air india","totalprice":4180,"departuretime":"13:50"},{"date":"2020-12-10","airline":"Air india","totalprice":4180,"departuretime":"07:05"}];

// Group data...
const groups = {};
input.forEach(({
  airline,
  ...rest
}) => (groups[airline] = groups[airline] || []).push(rest));

// ... and transform back to array.
const output = Object.entries(groups).map(([airline, data]) => ({
  airline,
  data
}));
console.log(output);

Christian LSANGOLA · Accepted Answer · 2020-12-14 08:13:00Z

Here is another solution with some ES6 code

const arr = [
  {
    date: '2020-12-10',
    airline: 'Air asia',
    totalprice: 4180,
    departuretime: '20:25',
  },
  {
    date: '2020-12-10',
    airline: 'Air asia',
    totalprice: 4180,
    departuretime: '11:25',
  },
  {
    date: '2020-12-10',
    airline: 'Air asia',
    totalprice: 4180,
    departuretime: '22:45',
  },
  {
    date: '2020-12-10',
    airline: 'Air india',
    totalprice: 4180,
    departuretime: '06:10',
  },
  {
    date: '2020-12-10',
    airline: 'Air india',
    totalprice: 4180,
    departuretime: '13:50',
  },
  {
    date: '2020-12-10',
    airline: 'Air india',
    totalprice: 4180,
    departuretime: '07:05',
  },
];

//Using a Set datastructure to capture individual airline names
let uniqueAirlinesSet = new Set();
for (let el of arr) {
  uniqueAirlinesSet.add(el.airline);
}

// Converted set to array of unique elements like this["Air Asia","Air India"]
const uniqueAirlinesArr = [...uniqueAirlinesSet];

const newFormattedArray = uniqueAirlinesArr.reduce((acc, el) => {
  const obj = {
    airline: el,
    data: [],
  };
  for (let { airline, date, departuretime, totalprice } of arr) {
    if (el === airline) {
      obj.data.push({ date, departuretime, totalprice });
    }
  }
  acc.push(obj);
  return acc;
}, []);

Collectives™ on Stack Overflow

covert my json Array to my json structure in reactjs

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related