Transform javascript array of object to object with keys and array of values

Question

I have an array of objects I need to transform into new objects. some value as keys and an array of values.

const data = [
  {
    type: 'user',
    id: 1
  },
  {
    type: 'user',
    id: 2
  },
  {
    type: 'group',
    id: 1
  },
  {
    type: 'group',
    id: 2
  },
  {
    type: 'user',
    id: 3
  },
  {
    type: 'user',
    id: 4
  }
]

and the desired result is

const result = {
  user: [1, 2, 3, 4],
  group: [1, 2]
}

what I've tried using reduced but it not what I'm expected.

const result = data.reduce((acc, { type, ...obj }) => {
  acc[type] = data.map(item => item.id)
  return acc;
}, {})

result = { user: [ 1, 2, 1, 2, 3, 4 ], group: [ 1, 2, 1, 2, 3, 4 ] }

hgb123 · Accepted Answer · 2020-10-05 08:30:51Z

2

Each iterate, you check if the accumulate object has the type, if yes, push the iterated element's id to the existing array, else init the array

const data = [
  {
    type: "user",
    id: 1,
  },
  {
    type: "user",
    id: 2,
  },
  {
    type: "group",
    id: 1,
  },
  {
    type: "group",
    id: 2,
  },
  {
    type: "user",
    id: 3,
  },
  {
    type: "user",
    id: 4,
  },
]

const res = data.reduce((acc, el) => {
  if (acc[el.type]) {
    acc[el.type].push(el.id)
  } else {
    acc[el.type] = [el.id]
  }

  return acc
}, {})

console.log(res)

answered Oct 5, 2020 at 8:30

hgb123

14.9k3 gold badges24 silver badges43 bronze badges

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

Comments

T.J. Crowder · Accepted Answer · 2020-10-05 08:38:34Z

Unless you're doing functional programming with predefined reducer functions, reduce is usually an overcomplicated tool. Just use a loop.

In this case, you'd start with an object with user and group properties that have empty arrays, then add to the right array using a dynamic property name:

const result = { user: [], group: [] };
for (const {type, id} of data) {
    result[type].push(id);
}

Live Example:

const data = [
  {
    type: 'user',
    id: 1
  },
  {
    type: 'user',
    id: 2
  },
  {
    type: 'group',
    id: 1
  },
  {
    type: 'group',
    id: 2
  },
  {
    type: 'user',
    id: 3
  },
  {
    type: 'user',
    id: 4
  }
];

const result = { user: [], group: [] };
for (const {type, id} of data) {
    result[type].push(id);
}
console.log(result);

If the type values aren't known in advance, add the arrays dynamically:

const result = { user: [], group: [] };
for (const {type, id} of data) {
    if (!result[type]) {
        result[type] = [];
    }
    result[type].push(id);
}

Live Example:

const data = [
  {
    type: 'user',
    id: 1
  },
  {
    type: 'user',
    id: 2
  },
  {
    type: 'group',
    id: 1
  },
  {
    type: 'group',
    id: 2
  },
  {
    type: 'user',
    id: 3
  },
  {
    type: 'user',
    id: 4
  }
];

const result = { user: [], group: [] };
for (const {type, id} of data) {
    if (!result[type]) {
        result[type] = [];
    }
    result[type].push(id);
}
console.log(result);

If you like being really terse, you could use the new ??= operator to add the array when it's not there yet (for me, in this case, it's going too far and losing clarity):

const result = { user: [], group: [] };
for (const {type, id} of data) {
    (result[type] ??= []).push(id);
}

Live Example:

const data = [
  {
    type: 'user',
    id: 1
  },
  {
    type: 'user',
    id: 2
  },
  {
    type: 'group',
    id: 1
  },
  {
    type: 'group',
    id: 2
  },
  {
    type: 'user',
    id: 3
  },
  {
    type: 'user',
    id: 4
  }
];

const result = { user: [], group: [] };
for (const {type, id} of data) {
    (result[type] ??= []).push(id);
}
console.log(result);

You can shoehorn this into a reduce (because you can shoehorn any array operation into a reduce), but doing so doesn't buy you anything. Here's that first one using reduce instead of a loop:

const result = data.reduce((acc, {type, id}) => {
    acc[type].push(id);
    return acc;
}, {user: [], group: []});

const data = [
  {
    type: 'user',
    id: 1
  },
  {
    type: 'user',
    id: 2
  },
  {
    type: 'group',
    id: 1
  },
  {
    type: 'group',
    id: 2
  },
  {
    type: 'user',
    id: 3
  },
  {
    type: 'user',
    id: 4
  }
];

const result = data.reduce((acc, {type, id}) => {
    acc[type].push(id);
    return acc;
}, {user: [], group: []});
console.log(result);

Nina Scholz · Accepted Answer · 2020-10-05 08:30:31Z

1

You need to check if the property does not exists and push id to it.

const
    data = [{ type: 'user', id: 1 }, { type: 'user', id: 2 }, { type: 'group', id: 1 }, { type: 'group', id: 2 }, { type: 'user', id: 3 }, { type: 'user', id: 4 }],
    result = data.reduce((acc, { type, id }) => {
        acc[type] ??= [];
        acc[type].push(id);
        return acc;
    }, {});

console.log(result);

answered Oct 5, 2020 at 8:30

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

2 Comments

Ori Drori Over a year ago

UV. When did the ??= came into being. I see that there is also ||= - is it old or new?

T.J. Crowder Over a year ago

@OriDrori - They were added in ES2021, here's the (finished) proposal.

Ori Drori · Accepted Answer · 2020-10-05 08:30:35Z

0

If the property doesn't exist on the accumulator add it, and if it does push the id into it:

const data = [{"type":"user","id":1},{"type":"user","id":2},{"type":"group","id":1},{"type":"group","id":2},{"type":"user","id":3},{"type":"user","id":4}];

const result = data.reduce((acc, { type, id }) => {
  if(!acc[type]) acc[type] = [];
  
  acc[type].push(id);

  return acc;
}, {})

console.log(result)

answered Oct 5, 2020 at 8:30

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Comments

IRSHAD · Accepted Answer · 2020-10-05 08:42:44Z

How about this?

A vanilla version of groupBy()

const groupBy = function(xs, key) {
  return xs.reduce(function(rv, x) {
    (rv[x[key]] = rv[x[key]] || []).push(x.id);
    return rv;
  }, {});
};

You could easily call group by a key using,

const result = groupBy(data, 'type');

Full code:

const groupBy = function(xs, key) {
  return xs.reduce(function(rv, x) {
    (rv[x[key]] = rv[x[key]] || []).push(x.id);
    return rv;
  }, {});
};

const data = [
  {
    type: 'user',
    id: 1
  },
  {
    type: 'user',
    id: 2
  },
  {
    type: 'group',
    id: 1
  },
  {
    type: 'group',
    id: 2
  },
  {
    type: 'user',
    id: 3
  },
  {
    type: 'user',
    id: 4
  }
]

const result = groupBy(data, 'type');

console.log(result); // { group: [1, 2], user: [1, 2, 3, 4] }

Reference link.

trincot · Accepted Answer · 2020-10-05 08:59:34Z

-1

Here is a solution using Object.fromEntries to build the skeleton for the result object (with empty arrays). Then a simple loop can populate those arrays, and you're done:

let data = [{ type: 'user', id: 1 }, { type: 'user', id: 2 }, { type: 'group', id: 1 }, { type: 'group', id: 2 }, { type: 'user', id: 3 }, { type: 'user', id: 4 }];
let result = Object.fromEntries(data.map(({type}) => [type, []]));
for (let {type, id} of data) result[type].push(id);

console.log(result);

answered Oct 5, 2020 at 8:59

trincot

357k38 gold badges282 silver badges338 bronze badges

Collectives™ on Stack Overflow

Transform javascript array of object to object with keys and array of values

6 Answers 6

Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related