How do I transform the data from this API into an array of objects organized by a specific prop?

Question

I'm getting this data from an API:

 let dataFromApi = [
    {
      // lots of other props
      name: 'super cool place',
      address: 'address of food place',
      classification: 'food',
    },
    {
      // lots of other props
      name: 'name of tech place',
      address: 'address of tech place',
      classification: 'tech',
    },
    {
      // lots of other props
      name: 'name of clothes place',
      address: 'address of clothes place',
      classification: 'clothes',
    },
    {
      // lots of other props
      name: 'name of of another clothes place',
      address: 'address of another clothes place',
      classification: 'clothes',
    },
    {
      // lots of other props
      name: 'name of of another tech place',
      address: 'address of another tech place',
      classification: 'tech',
    },
  ]

What I'd like to do is create a new array of objects that has 2 things:

A prop called classification;
A prop called establishments, which is an array of objects containing all the establishments matching the classification prop.

Meaning something like this:

let establishmentsArray = [
    {
      classification: 'food',
      establishments: [
        {
          name: 'name of food place',
          address: 'address of food place',
          classification: 'food',
          // rest of its props
        },
        // Lots of other food places places
      ],
    },
    {
      classification: 'clothes',
      establishments: [
        {
          name: 'name of clothes place',
          address: 'address of clothes place',
          classification: 'clothes',
          // rest of its props
        },
        {
          name: 'name of another clothes place',
          address: 'address of another clothes place',
          classification: 'clothes',
          // rest of its props
        },
        // Lots of other clothes places
      ],
    },
    {
      classification: 'tech',
      establishments: [
        {
          name: 'name of tech place',
          address: 'address of tech place',
          classification: 'tech',
          // rest of its props
        },
        {
          name: 'name of another tech place',
          address: 'address of another tech place',
          classification: 'tech',
          // rest of its props
        },
        // Lots of other tech places
      ],
    },
  ]

Thanks for the help in advance!

You're likely looking for: https://stackoverflow.com/questions/40774697/how-can-i-group-an-array-of-objects-by-key — malarres, Mar 08 '22 at 14:07
Thank you! I was having difficulty trying to formulate my question. — Yurdesou, Mar 08 '22 at 14:19

score 3 · Accepted Answer · answered Mar 08 '22 at 14:08

Looks like you're trying to group by single field which is a good use-case for array.reduce:

let dataFromApi = [
    {
      // lots of other props
      name: 'super cool place',
      address: 'address of food place',
      classification: 'food',
    },
    {
      // lots of other props
      name: 'name of tech place',
      address: 'address of tech place',
      classification: 'tech',
    },
    {
      // lots of other props
      name: 'name of clothes place',
      address: 'address of clothes place',
      classification: 'clothes',
    },
    {
      // lots of other props
      name: 'name of of another clothes place',
      address: 'address of another clothes place',
      classification: 'clothes',
    },
    {
      // lots of other props
      name: 'name of of another tech place',
      address: 'address of another tech place',
      classification: 'tech',
    },
  ]
  
  let output = dataFromApi.reduce((acc, cur) => {
      let { classification, ...rest} = cur;
      let prev = acc.find(x => x.classification === classification);
      if(!prev) {
          acc.push({classification, establishments: [cur]});
      } else {
          prev.establishments.push(cur);
      }
      return acc;
  }, []);
  
  console.log(output);

`cur` stands for currently processed element and `acc` is an accumulator - the value that was returned from previous iteration, in this case it starts with an empty array (2nd parameter) — mickl, Mar 08 '22 at 14:27

score 1 · Answer 2 · answered Mar 08 '22 at 14:13

Here is another example, you can use map.reduce:


const groupByClassification = (items) => {
  const grouped = items.reduce((acc, cur) => {
    if (cur.classification in acc) {
      acc[cur.classification].establishments.push(cur);

      return acc;
    }

    const newGroupItem: GroupedItem = {
      classification: cur.classification,
      establishments: [cur]
    };

    return {
      ...acc,
      [cur.classification]: newGroupItem
    };
  }, {} });

  return Object.values(grouped);
};

score 0 · Answer 3 · answered Mar 08 '22 at 14:21

let dataFromApi = [
    {
      // lots of other props
      name: 'super cool place',
      address: 'address of food place',
      classification: 'food',
    },
    {
      // lots of other props
      name: 'name of tech place',
      address: 'address of tech place',
      classification: 'tech',
    },
    {
      // lots of other props
      name: 'name of clothes place',
      address: 'address of clothes place',
      classification: 'clothes',
    },
    {
      // lots of other props
      name: 'name of of another clothes place',
      address: 'address of another clothes place',
      classification: 'clothes',
    },
    {
      // lots of other props
      name: 'name of of another tech place',
      address: 'address of another tech place',
      classification: 'tech',
    },
  ]


function GroupByClassification(data){
  var groupedData = {};
  for (const element of data) {
  if(!(element.classification in groupedData)){
    groupedData[element.classification] = [element];
    }else{
    groupedData[element.classification].push(element);
    }
  }
  return groupedData;
}

console.log(GroupByClassification(dataFromApi));

How do I transform the data from this API into an array of objects organized by a specific prop?

3 Answers3