VueJs - Retrieve objects from array into new object array

Question

Can anyone please help me find a way to return objects from an object array to concat all of them into a new object array with object names instead of keys.

array = [
  1: {
    cart: { fruits: {}, vegetables: {}, juices: {}}
  },
  2: {
    cart: { boxes: {}, tools: {}, bottles: {}}
  }
]

I am trying to get this specific output in Vuejs using methods and computed properties, But I am only able to get the output with keys as a normal array. I need the object name instead of keys.

Expected output

newArray = {
  cart: { fruits: {}, vegetables: {}, juices: {} boxes: {}, tools: {}, bottles: {}}
}

Can you please tell me where i went wrong ? so that i can correct it in the future. — raghu nath, Mar 05 '19 at 17:20
An element in an array is not a name value pair. What you have inside `array = [1:{}, 2:{},]` is invalid. Instead, valid syntax is just `array = [{}, {}]` — Aragorn, Mar 05 '19 at 17:26
Alright, I understand. I'll make sure to use proper syntax next time. But i think my point was made within the question as i got the solution i was looking for. — raghu nath, Mar 05 '19 at 17:30

score 1 · Answer 1 · answered Mar 05 '19 at 16:49

1

You can use reduce and destructuring assignment and merge object in desired format using key's.

let array = [{cart: { fruits: {}, vegetables: {}, juices: {}}},{cart: { boxes: {}, tools: {}, bottles: {}}}]

let op = array.reduce( (op,inp) => {
  let key = Object.keys(inp)[0]
  op[key] = {...op[key], ...inp[key]}
  return op
},{})

console.log(op)

answered Mar 05 '19 at 16:49

Code Maniac

37,143
5
39
60

Your answer gave me the correct output within the console log but when i applied it using methods and computed property in Vuejs, The output turned out to be undefined. Must be probably something i missed to mention in the details. But, Thank you for the answer – raghu nath Mar 05 '19 at 17:19
@raghunath this is strange. if you used it properly it should work. maybe you may have missed adding something while copying.cross check once will be happy to help more – Code Maniac Mar 05 '19 at 17:22
I copied the entire thing an used it within computed properties. The only change I did was setting the variables first and then assigning your code to it. But i still got an undefined output. But it worked in getting the output in the console log. – raghu nath Mar 05 '19 at 17:25

Shidersz · Accepted Answer · 2019-03-05T17:10:16.970

One possible solution is to use Array.reduce() and while iterating over the Object.keys() of every object in the array use Object.assign() to collect they on the related key of the final expected output:

let arr = [
  {
    cart: {fruits: {}, vegetables: {}, juices: {}},
    other: {foo: {}, bar: {}}
  },
  {
    cart: {boxes: {}, tools: {}, bottles: {}},
    other: {oof: {}, rab: {}}
  }
];

let res = arr.reduce((acc, obj) =>
{
    Object.keys(obj).forEach(key =>
    {
        acc[key] = acc[key] || {};
        Object.assign(acc[key], obj[key]);
    });

    return acc;
}, {});

console.log(res);

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

I had to tweak it a little for it to work within my own code. But this was perfect. Thank you so much. — raghu nath, Mar 05 '19 at 17:21

VueJs - Retrieve objects from array into new object array

2 Answers2