Merge array of objects with array values into a single object

Question

Using plain JavaScript or lodash, what's the easiest way to transform an array of objects into a single object, while concatenating any array values?

I can achieve it on a single property using _.flatMap(before, "nodes") but not sure how to include all properties.

For example:

const before = [
  {
    nodes: [
      { "id": "1" },
      { "id": "2" }
    ],
    links: [
      { "source": "1", "target": "2" }
    ],
  },
  {
    nodes: [
        { "id": "3" },
        { "id": "4" },
        { "id": "5" },
        { "id": "6" }
    ],
    links: [
      { "source": "3", "target": "4" },
      { "source": "5", "target": "6" }
    ],
  }
];

const after = {
  nodes: [
    { "id": "1" },
    { "id": "2" },
    { "id": "3" },
    { "id": "4" },
    { "id": "5" },
    { "id": "6" }
  ],
  links: [
    { "source": "1", "target": "2" },
    { "source": "3", "target": "4" },
    { "source": "5", "target": "6" }
  ],
};

What do you mean "include all properties"? Do you know specific keys in the object, like nodes and links, or are you asking how to merge properties of any two objects together? — Andy Ray
– Andy Ray, Commented Jun 19, 2023 at 5:18
@AndyRay yes, in this case, I do know the specific property keys, however I'm looking for a general solution that'll merge all properties. — Chris Fulstow
– Chris Fulstow, Commented Jun 19, 2023 at 6:56
What does “merge all properties” mean? Do you already know your object only has array values? If not, what is your expectation for merging non-array values? And what about nested objects and arrays? — Andy Ray
– Andy Ray, Commented Jun 19, 2023 at 16:20

DecPK · Accepted Answer · 2023-06-19 05:06:59Z

1

You can achieve this using vanilla js using reduce and Object.entries as:

const before = [
    {
        nodes: [
            { "id": "1" },
            { "id": "2" }
        ],
        links: [
            { "source": "1", "target": "2" }
        ],
    },
    {
        nodes: [
            { "id": "3" },
            { "id": "4" },
            { "id": "5" },
            { "id": "6" }
        ],
        links: [
            { "source": "3", "target": "4" },
            { "source": "5", "target": "6" }
        ],
    }
];

const result = before.reduce((acc, curr) => {
    Object.entries(curr).forEach(([key, value]) => {
        acc[key] = [ ...(acc[key] ?? []), ...value];
    })
    return acc;
}, {});

console.log(result);

answered Jun 19, 2023 at 5:06

DecPK

25.4k6 gold badges32 silver badges46 bronze badges

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

Comments

Jiraiya · Accepted Answer · 2023-06-19 05:14:09Z

1

Since you want to merge array into one, you should use reduce instead of map. Following should work

after = before.reduce((prevResult, element) => {
    var newResult = {}
    Object.keys(element).forEach((key) => {
        newResult[key] = prevResult[key].concat(element[key])
    })
    return newResult
})

reduce will work with each element in iterative manner from left to right.

Hope this helps

answered Jun 19, 2023 at 5:14

Jiraiya

1327 bronze badges

Comments

Manuvo · Accepted Answer · 2023-06-19 05:18:28Z

1

One possible solution using lodash:

const after = _.reduce(before, (acc, curr) => {
  _.forOwn(curr, (value, key) => {
    acc[key] = _.concat(acc[key] || [], value);
  });
  
  return acc;
}, {});

The result is a new object that contains these combined arrays.

answered Jun 19, 2023 at 5:18

Manuvo

9097 silver badges16 bronze badges

Comments

Ali Yaghoubi · Accepted Answer · 2023-06-19 05:38:59Z

const before = [
  {
    nodes: [
      { "id": "1" },
      { "id": "2" }
    ],
    links: [
      { "source": "1", "target": "2" }
    ],
  },
  {
    nodes: [
        { "id": "3" },
        { "id": "4" },
        { "id": "5" },
        { "id": "6" }
    ],
    links: [
      { "source": "3", "target": "4" },
      { "source": "5", "target": "6" }
    ],
  }
];

Following below code:

const flatData = (data) => {
    const result = { nodes : [], links: [] };

    for (let i = 0; i < data.length; i++) {
        const {nodes, links} = data[i]; // nodes and links

        // nodes
        for (let i = 0; i < nodes.length; i++) {
            result.nodes = [...result.nodes, nodes[i]];
        }

        // links
        for (let i = 0; i < links.length; i++) {
            result.links = [...result.links, nodes[i]];
        }
    }

    return result;
}

Abin Thaha Azees · Accepted Answer · 2023-06-19 06:00:04Z

You can use Array.reduce() to achieve this efficiently.

Please find the following code:

const before = [{
    nodes: [{
        "id": "1"
      },
      {
        "id": "2"
      }
    ],
    links: [{
      "source": "1",
      "target": "2"
    }],
  },
  {
    nodes: [{
        "id": "3"
      },
      {
        "id": "4"
      },
      {
        "id": "5"
      },
      {
        "id": "6"
      }
    ],
    links: [{
        "source": "3",
        "target": "4"
      },
      {
        "source": "5",
        "target": "6"
      }
    ],
  }
];

const after = before.reduce((acc, curr) => {
    Object.keys(curr).forEach(key => {
        acc[key] = [...acc[key] , ...curr[key]]
    })
    return acc;
})
console.log("After is ===>>", after);

Collectives™ on Stack Overflow

Merge array of objects with array values into a single object

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related