Categorize an array of objects based on a key using JavaScript

Question

Categorize an array of objects based on a key using JavaScript

I searched extensively for solutions online, but I still can't seem to make it work and I'm unsure why.

Here is an array with objects:

array =[
   {
      "name":"Alex",
      "id":0
   },
   {
      "age":20,
      "id":0
   },
   {
      "name":"John",
      "id":1
   },
   {
      "age":30,
      "id":1
   }
]

My goal is to group them based on their id, resulting in the following outcome:

array =[
   [
      {
         "name":"Alex",
         "id":0
      },
      {
         "age":20,
         "id":0
      }
   ],
   [
      {
         "name":"John",
         "id":1
      },
      {
         "age":30,
         "id":1
      }
   ]
]

I came across several solutions that dealt with a similar problem, so I attempted one, but I can't figure out why it's not functioning as expected.

 array.reduce((a, value) => {
       a[value.id] = [...a[value.id] || [], value];
        return a;
    }, [])

If anyone could shed some light on this issue, that would be greatly appreciated.

javascript arrays object ecmascript-6 reduce

Answer 1

Answer №1

One reason for this issue is that the value.index property does not exist, causing it to always be undefined.

To resolve this, simply replace value.index with value.id, and the code will function correctly.

const array = [{
    "name": "Alice",
    "id": 0
  },
  {
    "age": 25,
    "id": 0
  },
  {
    "name": "Bob",
    "id": 1
  },
  {
    "age": 35,
    "id": 1
  }
];

const output = array.reduce((accumulator, value) => {
  accumulator[value.id] = [...(accumulator[value.id] || []), value];
  return accumulator;
}, []);
console.log(output);

Answer 2

One reason for this issue is that the value.index property does not exist, causing it to always be undefined.

To resolve this, simply replace value.index with value.id, and the code will function correctly.

const array = [{
    "name": "Alice",
    "id": 0
  },
  {
    "age": 25,
    "id": 0
  },
  {
    "name": "Bob",
    "id": 1
  },
  {
    "age": 35,
    "id": 1
  }
];

const output = array.reduce((accumulator, value) => {
  accumulator[value.id] = [...(accumulator[value.id] || []), value];
  return accumulator;
}, []);
console.log(output);

Answer 3

Answer №2

You have mistakenly used the wrong key - index. It should be corrected to id

const items = [{
    "name": "Alex",
    "id": 0
  },
  {
    "age": 20,
    "id": 0
  },
  {
    "name": "John",
    "id": 1
  },
  {
    "age": 30,
    "id": 1
  }
]

const result = items.reduce((accum, item) => {
  accum[item.id] = [...accum[item.id] || [], item];
  return accum;
}, [])

console.log(result);

Answer 4

You have mistakenly used the wrong key - index. It should be corrected to id

const items = [{
    "name": "Alex",
    "id": 0
  },
  {
    "age": 20,
    "id": 0
  },
  {
    "name": "John",
    "id": 1
  },
  {
    "age": 30,
    "id": 1
  }
]

const result = items.reduce((accum, item) => {
  accum[item.id] = [...accum[item.id] || [], item];
  return accum;
}, [])

console.log(result);

Answer 5

Answer №3

When considering your specific scenario, it's worth noting that there isn't an "index" attribute associated with your objects. As a result, invoking value.index will yield undefined. If your intention is to utilize the id fields as the index for the final array (as indicated by the reduce function you're attempting), consider employing the following approach. Be aware, however, that if your object ids are not consecutive starting from 0, your final array may contain null values. To address this, you can eliminate these null values by implementing something akin to array.filter((el) => el ); on your final array.

array.reduce((a, value) => {
  if (a[value.id]) {
    a[value.id].push(value);
  } else {
    a[value.id] = [value];
  }
  return a;
}, []);

Answer 6

When considering your specific scenario, it's worth noting that there isn't an "index" attribute associated with your objects. As a result, invoking value.index will yield undefined. If your intention is to utilize the id fields as the index for the final array (as indicated by the reduce function you're attempting), consider employing the following approach. Be aware, however, that if your object ids are not consecutive starting from 0, your final array may contain null values. To address this, you can eliminate these null values by implementing something akin to array.filter((el) => el ); on your final array.

array.reduce((a, value) => {
  if (a[value.id]) {
    a[value.id].push(value);
  } else {
    a[value.id] = [value];
  }
  return a;
}, []);

Answer 7

Answer №4

There was a small error in your initial question, but you quickly corrected it with an edit. If you want to ensure compatibility with any ID values (as mentioned in a comment where IDs like 0 and 1 are considered valid and early array indices), then using a Map and retrieving its values() is advisable:

const array = [{
    "name": "Alice",
    "id": 90
  },
  {
    "age": 25,
    "id": 90
  },
  {
    "name": "Bob",
    "id": 110
  },
  {
    "age": 35,
    "id": 110
  }
]

const map = array.reduce((acc, val) => {
  acc.set(val.id, [...acc.get(val.id) || [], val]);
  return acc;
}, new Map())
const result = Array.from(map.values());

console.log(result);

Answer 8

There was a small error in your initial question, but you quickly corrected it with an edit. If you want to ensure compatibility with any ID values (as mentioned in a comment where IDs like 0 and 1 are considered valid and early array indices), then using a Map and retrieving its values() is advisable:

const array = [{
    "name": "Alice",
    "id": 90
  },
  {
    "age": 25,
    "id": 90
  },
  {
    "name": "Bob",
    "id": 110
  },
  {
    "age": 35,
    "id": 110
  }
]

const map = array.reduce((acc, val) => {
  acc.set(val.id, [...acc.get(val.id) || [], val]);
  return acc;
}, new Map())
const result = Array.from(map.values());

console.log(result);

Categorize an array of objects based on a key using JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

I possess a collection of timed images that I aim to employ jQuery for seamlessly transitioning between them

Why does the API in Next Js get triggered multiple times instead of just once, even when the strict mode is set to false?

Using jQuery to implement AJAX file uploads

How to incorporate a delay in ng-repeat using AngularJS

Capture data from a Telegram bot and store it in a Google Sheet

Why is the decision made to simply remove an item? Is there an option to instead choose and delete the specific item?

What is the process for invoking a server-side Java function from HTML with JavaScript?

Exploring the 3D Carousel Effect with jQuery

Is it normal for Tailwind animation to loop twice when transitioning between pages in Next.js?

The Plupload internal version seems to be incorrect. The file is labeled as 2.3.9, however, the actual version within the file is 2.3

Contrast between the $q constructor and promise interface

Switch off any other currently open divs

Setting a Value?

Using Node.js to implement pagination with the POKEapi through a loop

Is it possible to incorporate an editable text feature within react-moveable? (Allowing for both dragging and editing capabilities)

Steps for integrating the -toDataURL() method on a node.js server

Show information in a React Native element | Firebase

Developing a random string generator using Java within an Android app

Incorporating list items in a React component is not functioning as expected

Encountering an error in AngularJS: Issue with require(...) function, along with a runtime error in Node