Combine different Objects in Array

Question

I have the following data:

[
    [
        {
            "name": "color",
            "value": "red",
            "id": "colorID"
        },
        {
            "altText": "",
            "uri": "someURL",
            "id": "someID",
            "localFile": {
                "childImageSharp": {
                    "fluid": {
                        "fluidData": "someString",
                        "fluidData2": 1.567
                    }
                }
            }
        }
    ]
]

I am trying to combine that into one Object in which all properties of both should be present. "localfile" can stay nested as in I don't need it flattened or anything, just for everything to be in one single object if at all possible.

I am getting the current data structure by doing something like this:

  const variants = post.variations.nodes.map(function (variantItem) { return [variantItem.attributes.nodes[0], variantItem.featuredImage.node] });

I tried combining them with Object.assign() and also using the spread operator. I found a few other snippets but those only worked if both objects share the same keys.

I thought this should be quite simple but have been scratching my head over it for too long. Any input would be much appreciated.

user14520680 · Accepted Answer · 2020-11-29 08:44:29Z

2

It's as simple as

{...a[0][0], ...a[0][1]}

where a is your array of an array of objects. This will spread both objects into one.

answered Nov 29, 2020 at 8:44

user14520680

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

2 Comments

user14520680 Over a year ago

Indeed... not sure what you meant with "the spread operator didn't work".

Martin Conde Over a year ago

I didn't use it the right way, I stored the two arrays in a and b and did {...a,...b}, gotta brush up on the basics I guess :)

zb22 · Accepted Answer · 2020-11-29 08:47:02Z

1

You can use Array.prototype.reduce() after flattening the outer array with Array.prototype.flat() like so:

const arr = [
  [
      {
          "name": "color",
          "value": "red",
          "id": "colorID"
      },
      {
          "altText": "",
          "uri": "someURL",
          "id": "someID",
          "localFile": {
              "childImageSharp": {
                  "fluid": {
                      "fluidData": "someString",
                      "fluidData2": 1.567
                  }
              }
          }
      }
  ]
]

const obj = arr.flat().reduce((acc, curr) => {
  return {
    ...acc,
    ...curr
  }
}, {});

console.log(obj);

answered Nov 29, 2020 at 8:47

zb22

3,2413 gold badges22 silver badges38 bronze badges

3 Comments

Martin Conde Over a year ago

Thanks a lot, works perfectly but the solution from expressjs123 is a little shorter so had to accept that one ;)

zb22 Over a year ago

@MartinConde it's true that it's shorter for 2 items in the array, but what if you have 10 items for example?

Martin Conde Over a year ago

Good point, will come back to it should I ever have an object with more items, in this case it will always just be the two :)

Siva Kondapi Venkata · Accepted Answer · 2020-11-29 09:44:03Z

0

Use destructuring and ... operator.

const getObject = ([[first, second]]) => ({...first, ...second});

const data = [
    [
        {
            "name": "color",
            "value": "red",
            "id": "colorID"
        },
        {
            "altText": "",
            "uri": "someURL",
            "id": "someID",
            "localFile": {
                "childImageSharp": {
                    "fluid": {
                        "fluidData": "someString",
                        "fluidData2": 1.567
                    }
                }
            }
        }
    ]
]

console.log(getObject(data));

answered Nov 29, 2020 at 9:44

Siva Kondapi Venkata

11.1k2 gold badges20 silver badges32 bronze badges

Collectives™ on Stack Overflow

Combine different Objects in Array

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related