Make an array of objects inside object as multiple objects JavaScript

Question

I need to transform an array of objects in multiple objects inside parent object:

Actual object:

{
name: 'John Doe',
Age: 50,
email: 'j@gmail.com'
wishlist: [
   {product1 : 1},
   {product2 : 3},
   {product3 : 5},
   {product4 : 2},
 ]
}

Goal:

{

name: 'John Doe',
Age: 50,
email: 'j@gmail.com',
product1 : 1,
product2 : 3,
product3 : 5,
product4 : 2,

}

Does anyone know how to do that? kind regards,

Will wishlist objects (e.g. `{product1 : 1}` ) ever have more than one entry? — Ben Stephens, May 12 '21 at 09:35

Rahul Kumar · Accepted Answer · 2021-05-12T09:38:07.653

Use reduce() method on wishlist array and then create final object using spread operator.

const myObj = {
name: 'John Doe',
Age: 50,
email: 'j@gmail.com',
wishlist: [
   {product1 : 1},
   {product2 : 3},
   {product3 : 5},
   {product4 : 2},
 ]
}

const processData = (data) => {
  const wishlist = data.wishlist.reduce((result, obj) => {
     return {...result, ...obj};
  }, {});
  const finalObj = {...data, ...wishlist};
  delete finalObj.wishlist;
  return finalObj;
}

console.log(processData(myObj));

score 1 · Answer 2 · answered May 12 '21 at 09:35

You can merge all products, then merge them with the object and then delete the initial array. I think this way is better, not to modify the original object while iterating one of its attributes.

let products = {} 
for (let product of obj.wishlist)
   products = {...products, ...product}
obj = {...obj, ...products}
delete obj.wishlist

score 1 · Answer 3 · answered May 12 '21 at 09:40

You could use destructuring to grab your wishlist array, and an object of properties excluding your whishlist array (stored in r), which you can then use Object.assign() with the spread syntax to merge all the objects from your wishlist array into your r object:

const {wishlist, ...r} = { name: 'John Doe', Age: 50, email: 'j@gmail.com', wishlist: [ {product1 : 1}, {product2 : 3}, {product3 : 5}, {product4 : 2}, ] };

const res = Object.assign(r, ...wishlist);
console.log(res);

score 0 · Answer 4 · answered May 12 '21 at 09:39

0

You can try this,

var obj = {
  name: 'John Doe',
  Age: 50,
  email: 'j@gmail.com',
  wishlist: [{ product1: 1 }, { product2: 3 }, { product3: 5 }, { product4: 2 }]
};

var newObj = Object.assign({}, ...obj.wishlist);
delete obj.wishlist;

const finalObj = { ...obj, ...newObj };
console.log(finalObj);

answered May 12 '21 at 09:39

RGA

303
3
11

You can't delete wishlist property of original obj. – Rahul Kumar May 12 '21 at 09:44
@RahulKumar What do you mean by can't? This code appears to work. The question doesn't mention anything about not modifying the original object. Do you just mean that it would be better practice not to? Or is there something I'm missing? – Ben Stephens May 12 '21 at 09:52
It's recommended to not modify original object while following best coding practices. In his code that object might be used somewhere else and it can cause issue. – Rahul Kumar May 12 '21 at 09:56

score 0 · Answer 5 · answered May 12 '21 at 09:43

If anyone was looking for a more generic answer.

I have written code to transform an Object or an Array inside another Object or an Array.

Overkill if you ask me.

const sample = [{
  name: 'John Doe',
  Age: 50,
  email: 'j@gmail.com',
  wishlist: [{ product1: 1 }, { product2: 3 }, { product3: 5 }, { product4: 2 }]
}];

const transformArray = array => {
    let obj = {};
    array.forEach(item => {
        if (Array.isArray(item)) {
            obj = { ...obj, ...transformArray(item)};
        } else if (typeof item == 'object') {
            obj = { ...obj, ...transformObj(item)};
        }
    });
    return obj;
}

const transformObj = object => {
    let obj = {};
    Object.keys(object).forEach(key => {
        const item = object[key];
        if (Array.isArray(item)) {
            obj = { ...obj, ...transformArray(item) };
        } else if (typeof item == 'object') {
            obj = { ...obj, ...transformObj(item) };
        } else {
            obj = { ...obj, [key]: item };
        }
    });
    return obj;
}

console.log(transformObj(sample));

Make an array of objects inside object as multiple objects JavaScript

5 Answers5