JavaScript: Restructure and array of objects

Question

I get my data from an API which looks like this:

  desserts: [
    {
      name: ["Frozen Yohurt", "Ice cream Sandwich", "Egg"],
      calories: [159, 237, 109]
    },

My component (Vuetify Datatable) expects the data in a quite different form, like this:

    desserts: [
    { name: "Frozen Yogurt", calories: 159},        
    { name: "Ice cream sandwich", calories: 237 },
     {name: "Egg", calories: 109 }
    ],

I was not able to solve it. This (Creating a JavaScript Object from two arrays) looks quite similar, but gives a different result. Can anyone help me?

That link already has the answer to your question – Kunal Mukherjee Aug 08 '20 at 15:20 — Kunal Mukherjee, Aug 08 '20 at 15:20

Unmitigated · Accepted Answer · 2020-08-08T15:27:16.643

1

You can make use of the index parameter in Array#map. Array#flatMap can be used so it works for any number of objects in the array.

let arr = [
    {
      name: ["Frozen Yohurt", "Ice cream Sandwich", "Egg"],
      calories: [159, 237, 109]
    }
];
let res = arr.flatMap(({name,calories}) => 
  name.map((name,idx)=>({name,calories:calories[idx]})));
console.log(res);

edited Aug 08 '20 at 15:27

answered Aug 08 '20 at 15:20

Unmitigated

76,500
11
62
80

@DataMastery No problem. – Unmitigated Aug 08 '20 at 15:41

score 1 · Answer 2 · answered Aug 08 '20 at 15:20

You can make this in one iteration per object. Just make sure the two arrays have equal lengths:

let desserts = [
    {
      name: ["Frozen Yohurt", "Ice cream Sandwich", "Egg"],
      calories: [159, 237, 109]
    }
];

let list = [];
for(let i = 0; i < desserts.length; i++){
     let obj = desserts[i];
     if(obj.name.length == obj.calories.length){
          for(let i = 0; i < obj.name.length; i++){
               list.push({name: obj.name[i], calories: obj.calories[i]});
          }
     }
}
console.log(list);

score 1 · Answer 3 · answered Aug 08 '20 at 15:24

You could reduce the object's entries and map the found values along with the key as objects.

This approach takes only the first object found in the desserts array.

const
    desserts = { name: ["Frozen Yohurt", "Ice cream Sandwich", "Egg"], calories: [159, 237, 109] },
    result = Object
        .entries(desserts)
        .reduce((r, [k, values]) => values.map((v, i) => ({ ...r[i], [k]: v })), []);

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

score 0 · Answer 4 · answered Aug 08 '20 at 15:25

Use Array.prototype.reduce to flatten each item to your desired structure

const obj = {
  desserts: [{
    name: ["Frozen Yohurt", "Ice cream Sandwich", "Egg"],
    calories: [159, 237, 109]
  }]
};

const result = obj.desserts.reduce((acc, { name, calories }) => {
  Array.prototype.push.apply(acc, name.map((item, idx) => ({
    name: item,
    calories: calories[idx]
  })));
  return acc;
}, []);

console.log(result);

score 0 · Answer 5 · answered Aug 08 '20 at 15:32

Here is what you can do:

To convert the data into what you want is like this:

const requiredOutput = [];
 
for(let instance of desserts){
  instance.name.forEach((name, index)=>{
    requiredOutput.push({
        name: name,
        calories: instance.calories[index]
    })
  })
}

JavaScript: Restructure and array of objects

5 Answers5