Скрыть мой массив json в моей структуре json в reactjs

Я получаю данные из Backend, которые приведены ниже. и должны манипулировать данными в соответствии с требованием. как преобразовать следующий формат массива JSON в соответствии с требованиями ReactJS. данные Json, приведенные ниже

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

преобразовать вышеуказанные данные в соответствии со следующими данными

[
  {
    "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"
      }
    ]
  }
]

Как преобразовать методом Javascript?

Что вы пробовали? Вы пробовали читать методы массива?

Shubham Verma 14.12.2020 07:53
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
60
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

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.info(d)
Ответ принят как подходящий

Вы можете использовать функцию сокращения, чтобы решить эту проблему. См. ниже:

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

Почему это перебор?

Elie 14.12.2020 08:35

Случайно есть твит... twitter.com/dan_abramov/status/1338253118199508992

AKX 14.12.2020 08:48

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.info(output);

Вот еще одно решение с некоторым кодом ES6

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

Другие вопросы по теме