Convert array of objects with nested array of objects into array-like object

Question

Sorry about the title. I don't even know how I can explain what I want.

So here is what I am trying to achieve

const array = [
  {
    key: 0,
    key2: [ { id: "a", data: "abc" }, { id: "b", data: "wxy" }... ]
  },
  {
    key: 1,
    key2: [ { id: "a", data: "qwe" }, { id: "b", data: "zxc" }... ]
  },
...
]

I want to convert it to,

const result = {
    0 : {
        a: "abc",
        b: "wxy"
    },
    1 : {
        a: "qwe",
        b: "zxc"
    }
}

so far, I have this:

  const transforms = array
    .map((o) => {
      return { [o.key]: o.key2 };
    })
    .reduce((prev, curr) => {
      for (let key in curr)
        prev[key] = curr[key]
          .map((c) => {
            return { [c.id]: c.data};
          })
          .reduce((prev, curr) => {
            for (let key in curr) prev[key] = curr[key];
            return prev;
          }, {});

      return prev;
    }, {});

Which is hard to read, and probably not very performant. To be honest, I don't even know if it is really 100% working. It gave me expected result so far.

How do I refactor this? Please help.

Probably a better question for codereview.stackexchange.com. Though please make sure you read their help first — Liam
– Liam, Commented Jul 7, 2020 at 8:11

Yevhen Horbunkov · Accepted Answer · 2020-07-07 09:35:30Z

Your task may be effectively decomposed into 4 tiny problems:

Make key/value pair out of each id/data combination, which can be done using computed property names

key2.map(({id,data}) => ({[id]:data}))

Combine those key/value pairs into a single object, using Object.assign()

Object.assign({}, ...key2.map(({id,data}) => ({[id]:data})))

Array.prototype.map() your source array items into new array holding transformed key2

src.map(({key2}) => 
        Object.assign({}, ...key2.map(({id,data}) => ({[id]:data}))))

destructure resulting array (which is essentially, an object) into the object

{...result} = src.map(({key2}) => 
        Object.assign({}, ...key2.map(({id,data}) => ({[id]:data}))))

Resulting code is way more compact and works noticeably faster

You may find the live-demo as follows:

const src = [{key:0,key2:[{id:"a",data:"abc"},{id:"b",data:"wxy"}]},{key:1,key2:[{id:"a",data:"qwe"},{id:"b",data:"zxc"}]}],

      {...result} = src.map(({key2}) => 
        Object.assign({}, ...key2.map(({id,data}) => ({[id]:data}))))
      
console.log(result)

.as-console-wrapper{min-height:100%;}

triihim · Accepted Answer · 2020-07-07 09:24:52Z

0

const array = [
    {
      key: 0,
      key2: [ { id: "a", data: "abc" }, { id: "b", data: "wxy" }]
    },
    {
      key: 1,
      key2: [ { id: "a", data: "qwe" }, { id: "b", data: "zxc" }]
    },

]

const result = array.reduce((res, entry) => {
    return Object.assign(res, { [entry.key]: entry.key2.reduce((data, current) => {
        return Object.assign(data, { [current.id]: current.data }) 
    }, {}) });
}, {})

console.log(result)

Conversion function

array.reduce((res, entry) => {
    return Object.assign(res, { [entry.key]: entry.key2.reduce((data, current) => {
        return Object.assign(data, { [current.id]: current.data }) 
    }, {}) });
}, {})

edited Jul 7, 2020 at 9:24

answered Jul 7, 2020 at 9:14

triihim

624 bronze badges

2 Comments

Liam Over a year ago

See my comments on the above answer

Yevhen Horbunkov Over a year ago

You could've made your code a bit more compact by getting rid of unnecessary return's and curly braces. Also, considering OP's concern about performance, your solution does not provide that much of a gain.

Collectives™ on Stack Overflow

Convert array of objects with nested array of objects into array-like object

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related