How to merge objects in a subArray such that there is one array left with multiple objects in javascript

Question

I have the following array seen in full at ARRAY 1, I need each subarray to merge the objects within it such that it is like so.

ARRAY FINAL

[
  {"col0":"glasses","col1":"Milky glasses","col2":"292516467012796941"}
  , ...
]

So the end result is one array with 6 objects. The ... above represents the rest of the objects.

I have tried [].concat.apply([], array) but it doesn't do quite what I want. I will post what it does below this array at ARRAY 2

ARRAY 1

[
  [
    {
      "col0": "Glasses"
    },
    {
      "col1": "Milky Glasses"
    },
    {
      "col2": "292516467012796941"
    }
  ],
  [
    {
      "col0": "Knives"
    },
    {
      "col1": "Milky Knives"
    },
    {
      "col2": "292516484536599049"
    }
  ],
  [
    {
      "col0": "Forks"
    },
    {
      "col1": "Milky Forks"
    },
    {
      "col2": "292516497196057096"
    }
  ],
  [
    {
      "col0": "Gloves"
    },
    {
      "col1": "Kewl Gloves"
    },
    {
      "col2": "292534063457108493"
    }
  ],
  [
    {
      "col0": "Wrench"
    },
    {
      "col1": "Kewl Wrench"
    },
    {
      "col2": "292534088244396552"
    }
  ],
  [
    {
      "col0": "Monkey snake"
    },
    {
      "col1": "Kewl Monkey snake"
    },
    {
      "col2": "292534109863936521"
    }
  ]
]

This is the output that I don't want, but all I could manage thus far. See the output I do want at the top at ARRAY FINAL

ARRAY 2

[
  {
    "col0": "Glasses"
  },
  {
    "col1": "Milky Glasses"
  },
  {
    "col2": "292516467012796941"
  },
  {
    "col0": "Knives"
  },
  {
    "col1": "Milky Knives"
  },
  {
    "col2": "292516484536599049"
  },
  {
    "col0": "Forks"
  },
  {
    "col1": "Milky Forks"
  },
  {
    "col2": "292516497196057096"
  },
  {
    "col0": "Gloves"
  },
  {
    "col1": "Kewl Gloves"
  },
  {
    "col2": "292534063457108493"
  },
  {
    "col0": "Wrench"
  },
  {
    "col1": "Kewl Wrench"
  },
  {
    "col2": "292534088244396552"
  },
  {
    "col0": "Monkey snake"
  },
  {
    "col1": "Kewl Monkey snake"
  },
  {
    "col2": "292534109863936521"
  }
]

Thanks for any help ahead of time

The Array below the label Array1 is what I have and the Top one is what I would like in the end, the bottom one labeled Array 2 is a incorrect attempt. — Anders Kitson
– Anders Kitson, Commented Mar 9, 2021 at 15:14

Nina Scholz · Accepted Answer · 2021-03-09 15:15:33Z

5

You could map the array and spread the objects for getting a single object.

const
    data = [[{ col0: "Glasses" }, { col1: "Milky Glasses" }, { col2: 292516467012796900 }], [{ col0: "Knives" }, { col1: "Milky Knives" }, { col2: 292516484536599040 }], [{ col0: "Forks" }, { col1: "Milky Forks" }, { col2: 292516497196057100 }], [{ col0: "Gloves" }, { col1: "Kewl Gloves" }, { col2: 292534063457108500 }], [{ col0: "Wrench" }, { col1: "Kewl Wrench" }, { col2: 292534088244396540 }], [{ col0: "Monkey snake" }, { col1: "Kewl Monkey snake" }, { col2: 292534109863936500 }]],
    result = data.map(a => Object.assign({}, ...a));
    
console.log(result);

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

answered Mar 9, 2021 at 15:15

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Deon Rich · Accepted Answer · 2021-03-09 15:31:29Z

0

That could be accomplished like so, with arr being your original array -

for (let i = 0; i < arr.length; i++) {
  let res = {}, subArr = arr[i];
  subArr.forEach((a,ind) => {
Object.assign(res,subArr[0],subArr[1],subArr[2]);
  });
  arr[i] = res;
}

answered Mar 9, 2021 at 15:31

Deon Rich

6571 gold badge6 silver badges14 bronze badges

Comments

Jensen Rice · Accepted Answer · 2021-03-09 15:41:49Z

0

Nina has the best answer, but it's worth noting that Object.assign() is a shallow copy.

If the col properties were objects themselves you could use an approach like the one below:

const finish = start.map((x) => ({
  ...x[0],
  ...x[1],
  ...x[2]
}));

If I understand correctly, the ...x[0] syntax creates a deep copy of x[0] and we assign that directly to our new object, whereas Object.assign() creates a shallow copy.

answered Mar 9, 2021 at 15:41

Jensen Rice

1371 silver badge7 bronze badges

Collectives™ on Stack Overflow

How to merge objects in a subArray such that there is one array left with multiple objects in javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related