Блог

Главная - Вопросы по программированию - преобразование объекта из 3 ключей в массив

преобразование объекта из 3 ключей в массив

#javascript #reactjs

#javascript #reactjs

Вопрос:

Я новичок в React. Я создаю свой первый проект. В проекте я использую api. Я получаю этот объект из api:

 {
"cases": {
"10/6/20": 35806972,
"10/7/20": 36156226,
"10/8/20": 36515563,
"10/9/20": 36876248,
"10/10/20": 37105925
},
"deaths": {
"10/6/20": 1049875,
"10/7/20": 1055683,
"10/8/20": 1061877,
"10/9/20": 1068040,
"10/10/20": 1071388
},
"recovered": {
"10/6/20": 24834868,
"10/7/20": 25088883,
"10/8/20": 25306451,
"10/9/20": 25509379,
"10/10/20": 25610521
}

И я хочу превратить его в массив такого рода:

 [{
"date":"10/6/20",
"cases": 35806972,
"deaths": 1049875,
"recovered":24834868
},
{},
{},
{},
{}
]

Каждый элемент в массиве будет объектом, состоящим из даты и количества пациентов, количества выздоравливающих и умирающих в одну и ту же дату.

я понятия не имею, как это сделать. Это не сложно, но я понятия не имею, как это реализовать

Комментарии:

1. Кстати, речь идет не о react, а только о JS)

Ответ №1:

Вы можете использовать Object.keys и map метод массива.

 let data = {
"cases": {
"10/6/20": 35806972,
"10/7/20": 36156226,
"10/8/20": 36515563,
"10/9/20": 36876248,
"10/10/20": 37105925
},
"deaths": {
"10/6/20": 1049875,
"10/7/20": 1055683,
"10/8/20": 1061877,
"10/9/20": 1068040,
"10/10/20": 1071388
},
"recovered": {
"10/6/20": 24834868,
"10/7/20": 25088883,
"10/8/20": 25306451,
"10/9/20": 25509379,
"10/10/20": 25610521
}}


let keys = Object.keys(data.cases);

let modifiedData = keys.map(key => ({
  date: key,
  cases: data.cases[key],
  deaths: data.deaths[key],
  recovered: data.recovered[key]
}));

console.log("modifiedData", modifiedData)

Ответ №2:

Используя Array.reduce , вы можете получить новый объект, сгруппированный по date ключу из входных данных.

После получения grouped by date объекта, используя Object.entries amp; Array.map , вы можете получить желаемый результат.

 const input = {
  "cases": {
    "10/6/20": 35806972,
    "10/7/20": 36156226,
    "10/8/20": 36515563,
    "10/9/20": 36876248,
    "10/10/20": 37105925
  },
  "deaths": {
    "10/6/20": 1049875,
    "10/7/20": 1055683,
    "10/8/20": 1061877,
    "10/9/20": 1068040,
    "10/10/20": 1071388
  },
  "recovered": {
    "10/6/20": 24834868,
    "10/7/20": 25088883,
    "10/8/20": 25306451,
    "10/9/20": 25509379,
    "10/10/20": 25610521
  }
};

const groupByDate = Object.entries(input).reduce((acc, cur) => {
  Object.entries(cur[1]).forEach(([ date, value ]) => {
    acc[date] ? acc[date][cur[0]] = value : acc[date] = { [cur[0]]: value };
  });
  return acc;
}, {});

const result = Object.entries(groupByDate).map(([ date, value ]) => ({
  date,
  ...value
}));
console.log(result);

Ответ №3:

Перебирайте даты первого случайного элемента, так как все они имеют один и тот же список дат.

 let data = _get_data();

let result = [];

for (let date in data.oranges) { // in Object.values(data)[0]
  let obj = { date }; // shorthand of { "date": date }

  for (let food in data) {
    obj[food] = data[food][date];
  }

  result.push(obj);
}

console.log( result );

/***/
function _get_data() {
  return {
    "oranges": {
      "10/6/20": 35806972,
      "10/7/20": 36156226,
      "10/8/20": 36515563,
      "10/9/20": 36876248,
      "10/10/20": 37105925
    },
    "bananas": {
      "10/6/20": 1049875,
      "10/7/20": 1055683,
      "10/8/20": 1061877,
      "10/9/20": 1068040,
      "10/10/20": 1071388
    },
    "potatoes": {
      "10/6/20": 24834868,
      "10/7/20": 25088883,
      "10/8/20": 25306451,
      "10/9/20": 25509379,
      "10/10/20": 25610521
    }
  };
}

Ответ №4:

Немного длинный, но вот он:

 const data = {
  cases: {
    '10/6/20': 35806972,
    '10/7/20': 36156226,
    '10/8/20': 36515563,
    '10/9/20': 36876248,
    '10/10/20': 37105925,
  },
  deaths: {
    '10/6/20': 1049875,
    '10/7/20': 1055683,
    '10/8/20': 1061877,
    '10/9/20': 1068040,
    '10/10/20': 1071388,
  },
  recovered: {
    '10/6/20': 24834868,
    '10/7/20': 25088883,
    '10/8/20': 25306451,
    '10/9/20': 25509379,
    '10/10/20': 25610521,
  },
};
// 5. Get all the values from the reduce to have an array instead of an object
const newData = Object.values(
  // 1. Loop over all the keys in the object
  Object.keys(data).reduce((all, key) => {
    // 2. Loop over all the dates in the current object at the current key
    Object.keys(data[key]).forEach((date) => {
      // 3. Check if in the 'all' object there is an key for the current date if not create one with date inside
      all[date] = all[date] || { date: date };
      // 4. Inside the all object at the current date and then at the current key add the data at current key in the current date
      all[date][key] = data[key][date];
    });
    return all;
  }, [])
);

console.warn(newData);

Ответ №5:

 const data = {
    "cases": {
    "10/6/20": 35806972,
    "10/7/20": 36156226,
    "10/8/20": 36515563,
    "10/9/20": 36876248,
    "10/10/20": 37105925
    },
    "deaths": {
    "10/6/20": 1049875,
    "10/7/20": 1055683,
    "10/8/20": 1061877,
    "10/9/20": 1068040,
    "10/10/20": 1071388
    },
    "recovered": {
    "10/6/20": 24834868,
    "10/7/20": 25088883,
    "10/8/20": 25306451,
    "10/9/20": 25509379,
    "10/10/20": 25610521
    }};

const dataArray = [];
Object.keys(data.cases).map((date)=>{
dataArray.push({
    date,
    cases: data.cases[date],
    deaths:data.deaths[date],
    recovered:data.recovered[date],
})
})
console.log(dataArray);

Ответ №6:

Существуют разные способы получения результата, который вы ищете. Вот один из них, который я использовал Object.keys , Object.entries и Object.values вместе с Array.forEach 

 let data = {cases:{'10/6/20':35806972,'10/7/20':36156226,'10/8/20':36515563,'10/9/20':36876248,'10/10/20':37105925},deaths:{'10/6/20':1049875,'10/7/20':1055683,'10/8/20':1061877,'10/9/20':1068040,'10/10/20':1071388},recovered:{'10/6/20':24834868,'10/7/20':25088883,'10/8/20':25306451,'10/9/20':25509379,'10/10/20':25610521}};

const formatData = (data) => {
  const finalRes = {};
  Object.keys(data).forEach(key => {
    Object.entries(data[key]).forEach(([date, val]) => {
    //Creating/Updating the object with key as `date` in the 
    //finalRes object with the other properties such as `cases`, `deaths` and `recovered`
      finalRes[date] = {
        ...finalRes[date],
        date,
        [key]: val
      }
    })
  });
  //Finally, converting the object values to an array 
  return Object.values(finalRes);
}

console.log(formatData(data));  
 .as-console-wrapper {
  max-height: 100% !important;
  top: 0;
}