Create a new array of objects by property value from existing object add existing objects to new array

Question

I have an existing array of objects which share a property titled type like so

[
 {
   id: 1,
   name: 'a',
   type: 'foo',
 },{
   id: 2,
   name: 'b',
   type: 'bar',
 },{
   id: 3,
   name: 'c',
   type: 'fizz',
 },{
   id: 4,
   name: 'd',
   type: 'foo',
 },
]

I need to be able to structure a new array of objects with the existing ones grouped together by type like this

[
 {
  type: 'foo',
  groups: [
    {
      id: 1,
      name: 'a',
      type: 'foo',
    },{
      id: 4,
      name: 'd',
      type: 'foo',
    },
  ]
 },{
  type: 'bar',
  groups: [
    {
      id: 2,
      name: 'b',
      type: 'bar',
    }
  ]
 },{
  type: 'fizz',
  groups: [
    {
      id: 3,
      name: 'c',
      type: 'fizz',
    }
  ]
 }
]

this is what I have so far but im not able to create the new array and organize the objects by type, only able to grab the type itself any help would be greatly appreciated!

Observable.value.map(objects => {
    typesArr = [...new Set(objects.data.map(object => object.type))];
}); /// output = ['foo', 'bar', 'fizz']

Ori Drori · Accepted Answer · 2022-04-20 15:00:35Z

3

Reduce the array to a Map, using the type as the key. Use Array.from() to convert the Map's values iterator to an array:

const arr = [{"id":1,"name":"a","type":"foo"},{"id":2,"name":"b","type":"bar"},{"id":3,"name":"c","type":"fizz"},{"id":4,"name":"d","type":"foo"}]

const result = Array.from(arr.reduce((acc, o) => {
  const type = o.type
  if(!acc.has(type)) acc.set(type, { type, groups: [] })
  
  acc.get(type).groups.push(o)
  
  return acc
}, new Map()).values())

console.log(result)

To make TS infer the type of the grouped array, infer the type of an item from the original array, and use it to set the type of the Map (TS playground):

const arr = [{"id":1,"name":"a","type":"foo"},{"id":2,"name":"b","type":"bar"},{"id":3,"name":"c","type":"fizz"},{"id":4,"name":"d","type":"foo"}]

type Item = (typeof arr)[0]

const result = Array.from(arr.reduce((acc, o) => {
  const type = o.type
  if(!acc.has(type)) acc.set(type, { type, groups: [] })
  
  acc.get(type)!.groups.push(o)
  
  return acc
}, new Map<string, { type: Item['type'], groups: Item[] }>()).values())

console.log(result)

Another option is to reduce the array to a map of groups [type, object], and then use Array.from() to convert the Map's entries to the required form (TS playground):

const arr = [{"id":1,"name":"a","type":"foo"},{"id":2,"name":"b","type":"bar"},{"id":3,"name":"c","type":"fizz"},{"id":4,"name":"d","type":"foo"}]

const result = Array.from(
  arr.reduce((acc, o) => {
    const type = o.type
    if(!acc.has(type)) acc.set(type, [])

    acc.get(type).push(o)

    return acc
  }, new Map()),
  ([type, groups]) => ({ type, groups })
)

console.log(result)

edited Apr 20, 2022 at 15:00

answered Apr 20, 2022 at 1:46

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

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

2 Comments

Jacob Cadiente Over a year ago

well done sir much appreciated, I didnt think to approach this using reduce and creating a type based of the original arr via its first object will help me in many instances with this current feature you-are-the-best-nacho-libre.gif

Ori Drori Over a year ago

You're welcome :) I've added another variation on the same idea.

Collectives™ on Stack Overflow

Create a new array of objects by property value from existing object add existing objects to new array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related