Combine arrays from two objects into a single object inline

Question

I have two objects and some of their properties are identical and I need to combine these properties into a single array for another operation. Here are the objects:

  const grippers = [
    {
      relevantRegisters: {
        R: [
          { ID: 1 },
          { ID: 2 },
          { ID: 3 },
        ],
      },
    },
  ]

  const pallets = [
    {
      relevantRegisters: {
        R: [
          { ID: 1 },
          { ID: 2 },
          { ID: 3 },
        ],
      },
    },
  ]

Note that pallets and grippers are arrays, there can be more than one, so I cant just do pallets[0].relevantRegisters.R and take it from there. So it could be like this:

const grippers = [
    {
      relevantRegisters: {
        R: [
          { ID: 1 },
          { ID: 2 },
          { ID: 3 },
        ],
      },
    },
    {
      relevantRegisters: {
        R: [
          { ID: 1 },
          { ID: 2 },
          { ID: 3 },
        ],
      },
    },
    {
      relevantRegisters: {
        R: [
          { ID: 1 },
          { ID: 2 },
          { ID: 3 },
        ],
      },
    },
  ]

I want to have a final array with the combined objects from the R: arrays, like this (not the values of the ID's, but the objects that contain the ID!):

[{ID: 1}, {ID: 2}, {ID: 3}, {ID: 1}, {ID: 2}, {ID: 3}]

Here is what I have tried:

const extractedR = [
  ...pallets
    .map((pallet) => {
      return pallet.relevantRegisters.R;
    }),
  ...grippers
    .map((gripper) => {
      return gripper.relevantRegisters.R;
    }),
]

However the result from this is an array of an array each containing the IDs. [Array(3), Array(3)]

Note: I don't need just the ID's, I need the object that contains the ID's as there are other properties within it that I also need, so I need to end up with an Array of 6 objects. Instead I end up with a 2x3 Array.

If I separate the two maps into variables (discovered it while trying to debug it) and spread the variables into array then it works, and so I've tried "double spreading" inline (don't know if that even works) like [...[...pallets(..),], ...[...grippers(..)]] but it also didnt work. I need to be able to do this inline.

Answer 1

You can use flatMap

  const grippers = [
  {
      relevantRegisters: {
        R: [
          { ID: 1 },
          { ID: 2 },
          { ID: 3 },
        ],
      },
    },
  ]

  const pallets = [
  {
      relevantRegisters: {
        R: [
          { ID: 1 },
          { ID: 2 },
          { ID: 3 },
        ],
      },
    },
  ]


const extractedR = [
  ...pallets
    .flatMap((pallet:any) => {
      return pallet.relevantRegisters.R;
    }),
  ...grippers
    .flatMap((gripper:any) => {
      return gripper.relevantRegisters.R;
    }),
]

console.log(extractedR)

Answer 2

Is this what you want?

  const grippers = [
  {
      relevantRegisters: {
        R: [
          { ID: 1 },
          { ID: 2 },
          { ID: 3 },
        ],
      },
    },
  ]

  const pallets = [
  {
      relevantRegisters: {
        R: [
          { ID: 1 },
          { ID: 2 },
          { ID: 3 },
        ],
      },
    },
  ]
  var arrayInline = [].concat(grippers[0].relevantRegisters.R).concat(pallets[0].relevantRegisters.R);
  console.log(arrayInline);
  

Answer 3

You can use concat function for this.

const grippers = [
  {
      relevantRegisters: {
        R: [
          { ID: 1 },
          { ID: 2 },
          { ID: 3 },
        ],
      },
    },
  ]

  const pallets = [
  {
      relevantRegisters: {
        R: [
          { ID: 1 },
          { ID: 2 },
          { ID: 3 },
        ],
      },
    },
  ]
  let newArray = [];
grippers.filter(e => newArray = newArray.concat(e.relevantRegisters.R))
pallets.filter(e => newArray = newArray.concat(e.relevantRegisters.R))

console.log(newArray);
  

Answer 4

You can use array reduce to get your result.

Working Code

const grippers = [{
  relevantRegisters: {
    R: [{
        ID: 1
      },
      {
        ID: 2
      },
      {
        ID: 3
      },
    ],
  },
}, ]

const pallets = [{
  relevantRegisters: {
    R: [{
        ID: 1
      },
      {
        ID: 2
      },
      {
        ID: 3
      },
    ],
  },
}, ]

console.log([...grippers.map(({
  relevantRegisters: {
    R
  }
}) => R).reduce((arr, val) => [...arr, val]), ...pallets.map(({
  relevantRegisters: {
    R
  }
}) => R).reduce((arr, val) => [...arr, val])])

Answer 5

const extracted = [...grippers[0].relevantRegisters.R, ...pallets[0].relevantRegisters.R]

with the new requirement you could do it like this

[].concat.apply([], [...grippers.map(x => x.relevantRegisters.R), ...pallets.map(x => x.relevantRegisters.R)]);