Using reduce() to group items in an array based on a specific object property

Question

Using reduce() to group items in an array based on a specific object property

Creating a new array grouped by the property 'desc' of the objects within an existing array is my current task. Here is how I envision it:

const sourceArray = [
  { id: 'id1', sourceDesc: 'foo', prop1: 'ignoreme', prop2: 'ignoreme' }
  { id: 'id2', sourceDesc: 'foo', prop1: 'ignoreme', prop2: 'ignoreme' }
  { id: 'id3', sourceDesc: 'bar', prop1: 'ignoreme', prop2: 'ignoreme' }
  { id: 'id4', sourceDesc: 'baz', prop1: 'ignoreme', prop2: 'ignoreme' }
];

const targetArray = [
  { desc: 'foo', ids: [
    { id: 'id1', prop1: 'ignoreme', prop2: 'ignoreme' },
    { id: 'id2', prop1: 'ignoreme', prop2: 'ignoreme' }
  ]},
  { desc: 'bar', ids: [
    { id: 'id3', prop1: 'ignoreme', prop2: 'ignoreme' }
  ]},
  { desc: 'baz', ids: [
    { id: 'id4', prop1: 'ignoreme', prop2: 'ignoreme' }
  ]}
];

I believe using the reduce() higher-order function would be the most efficient way to accomplish this. However, I am facing some challenges in adapting the solutions I've found to fit my array structure. Any guidance on how to approach this would be greatly appreciated!

javascript arrays ecmascript-6 javascript-objects higher-order-functions

Answer 1

Answer №1

One way to achieve the desired result is by leveraging the power of the .reduce() and .find() methods together:

const inputData = [
  { id: 'id1', dataKey: 'valueA', prop1: 'ignoreme', prop2: 'ignoreme' },
  { id: 'id2', dataKey: 'valueA', prop1: 'ignoreme', prop2: 'ignoreme' },
  { id: 'id3', dataKey: 'valueB', prop1: 'ignoreme', prop2: 'ignoreme' },
  { id: 'id4', dataKey: 'valueC', prop1: 'ignoreme', prop2: 'ignoreme' }
];

const processedData = inputData.reduce((accumulator, currentElement) => {
  const foundElement = accumulator.find(item => item.key === currentElement.dataKey);
  
  if (foundElement) foundElement.ids.push({
    id: currentElement.id,
    prop1: currentElement.prop1,
    prop2: currentElement.prop2
  });
  else accumulator.push({
    key: currentElement.dataKey,
    ids: [{
      id: currentElement.id,
      prop1: currentElement.prop1,
      prop2: currentElement.prop2
    }]
  });
  return accumulator;
}, []);

console.log(processedData);

Answer 2

One way to achieve the desired result is by leveraging the power of the .reduce() and .find() methods together:

const inputData = [
  { id: 'id1', dataKey: 'valueA', prop1: 'ignoreme', prop2: 'ignoreme' },
  { id: 'id2', dataKey: 'valueA', prop1: 'ignoreme', prop2: 'ignoreme' },
  { id: 'id3', dataKey: 'valueB', prop1: 'ignoreme', prop2: 'ignoreme' },
  { id: 'id4', dataKey: 'valueC', prop1: 'ignoreme', prop2: 'ignoreme' }
];

const processedData = inputData.reduce((accumulator, currentElement) => {
  const foundElement = accumulator.find(item => item.key === currentElement.dataKey);
  
  if (foundElement) foundElement.ids.push({
    id: currentElement.id,
    prop1: currentElement.prop1,
    prop2: currentElement.prop2
  });
  else accumulator.push({
    key: currentElement.dataKey,
    ids: [{
      id: currentElement.id,
      prop1: currentElement.prop1,
      prop2: currentElement.prop2
    }]
  });
  return accumulator;
}, []);

console.log(processedData);

Answer 3

Answer №2

To achieve the desired result, you can utilize the .reduce() method in combination with Object.entries() and .map() methods:

const data = [
  { id: 'id1', sourceDesc: 'foo', prop1: 'ignoreme', prop2: 'ignoreme' },
  { id: 'id2', sourceDesc: 'foo', prop1: 'ignoreme', prop2: 'ignoreme' },
  { id: 'id3', sourceDesc: 'bar', prop1: 'ignoreme', prop2: 'ignoreme' },
  { id: 'id4', sourceDesc: 'baz', prop1: 'ignoreme', prop2: 'ignoreme' }
];

const reducer = (arr) => Object.entries(
  arr.reduce((r, { sourceDesc:desc, ...rest }) => {
    r[desc] = r[desc] || [];
    r[desc].push(rest);
    return r;
  }, {})
).map(([k, v]) => ({desc: k, ids: v}));

console.log(reducer(data));

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 4

To achieve the desired result, you can utilize the .reduce() method in combination with Object.entries() and .map() methods:

const data = [
  { id: 'id1', sourceDesc: 'foo', prop1: 'ignoreme', prop2: 'ignoreme' },
  { id: 'id2', sourceDesc: 'foo', prop1: 'ignoreme', prop2: 'ignoreme' },
  { id: 'id3', sourceDesc: 'bar', prop1: 'ignoreme', prop2: 'ignoreme' },
  { id: 'id4', sourceDesc: 'baz', prop1: 'ignoreme', prop2: 'ignoreme' }
];

const reducer = (arr) => Object.entries(
  arr.reduce((r, { sourceDesc:desc, ...rest }) => {
    r[desc] = r[desc] || [];
    r[desc].push(rest);
    return r;
  }, {})
).map(([k, v]) => ({desc: k, ids: v}));

console.log(reducer(data));

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 5

Answer №3

One way to utilize reduce is demonstrated below:

const data = [
  { id: 'id1', 'sourceDesc': 'foo', 'prop1': 'ignoreme', 'prop2': 'ignoreme' },
  { id: 'id2', 'sourceDesc': 'foo', 'prop1': 'ignoreme', 'prop2': 'ignoreme' },
  { id: 'id3', 'sourceDesc': 'bar', 'prop1': 'ignoreme', 'prop2': 'ignoreme' },
  { 'id': 'id4', 'sourceDesc': 'baz', 'prop1': 'ignoreme', 'prop2': 'ignoreme' }
];

const result = data.reduce((output,{id,sourceDesc,prop1,prop2})=>{
  let key = sourceDesc;
  output[key] = output[key] || {des:sourceDesc, ids:[]};
  output[key].ids.push({id,prop1,prop2});
  return output;
},{});

console.log(Object.values(result));

Answer 6

One way to utilize reduce is demonstrated below:

const data = [
  { id: 'id1', 'sourceDesc': 'foo', 'prop1': 'ignoreme', 'prop2': 'ignoreme' },
  { id: 'id2', 'sourceDesc': 'foo', 'prop1': 'ignoreme', 'prop2': 'ignoreme' },
  { id: 'id3', 'sourceDesc': 'bar', 'prop1': 'ignoreme', 'prop2': 'ignoreme' },
  { 'id': 'id4', 'sourceDesc': 'baz', 'prop1': 'ignoreme', 'prop2': 'ignoreme' }
];

const result = data.reduce((output,{id,sourceDesc,prop1,prop2})=>{
  let key = sourceDesc;
  output[key] = output[key] || {des:sourceDesc, ids:[]};
  output[key].ids.push({id,prop1,prop2});
  return output;
},{});

console.log(Object.values(result));

Answer 7

Answer №4

To transform the array into a Map structure, utilize the sourceDesc as the key and then expand the Map.values() iterator to convert it back into an array:

const sourceArray = [
  { id: 'id1', sourceDesc: 'foo', prop1: 'ignoreme', prop2: 'ignoreme' },
  { id: 'id2', sourceDesc: 'foo', prop1: 'ignoreme', prop2: 'ignoreme' },
  { id: 'id3', sourceDesc: 'bar', prop1: 'ignoreme', prop2: 'ignoreme' },
  { id: 'id4', sourceDesc: 'baz', prop1: 'ignoreme', prop2: 'ignoreme' }
];

const result = [...
  sourceArray.reduce((r, { sourceDesc: desc, ...o }) => {
    if(!r.has(desc)) r.set(desc, { desc, ids: [] }); 

    r.get(desc).ids.push(o); 

    return r;
  }, new Map)
.values()]; 

console.log(result);

Answer 8

To transform the array into a Map structure, utilize the sourceDesc as the key and then expand the Map.values() iterator to convert it back into an array:

const sourceArray = [
  { id: 'id1', sourceDesc: 'foo', prop1: 'ignoreme', prop2: 'ignoreme' },
  { id: 'id2', sourceDesc: 'foo', prop1: 'ignoreme', prop2: 'ignoreme' },
  { id: 'id3', sourceDesc: 'bar', prop1: 'ignoreme', prop2: 'ignoreme' },
  { id: 'id4', sourceDesc: 'baz', prop1: 'ignoreme', prop2: 'ignoreme' }
];

const result = [...
  sourceArray.reduce((r, { sourceDesc: desc, ...o }) => {
    if(!r.has(desc)) r.set(desc, { desc, ids: [] }); 

    r.get(desc).ids.push(o); 

    return r;
  }, new Map)
.values()]; 

console.log(result);

Answer 9

Answer №5

Check out this alternative method for grouping JSON arrays by key using the map function:

const inputArray = [{"id":"id1","sourceDesc":"foo","prop1":"ignoreme","prop2":"ignoreme"},{"id":"id2","sourceDesc":"foo","prop1":"ignoreme","prop2":"ignoreme"},{"id":"id3","sourceDesc":"bar","prop1":"ignoreme","prop2":"ignoreme"},{"id":"id4","sourceDesc":"baz","prop1":"ignoreme","prop2":"ignoreme"}];

const targetKey = 'sourceDesc';

const groupedArray = [...new Map(inputArray.map(item =>
  [item[targetKey], inputArray.filter(x=>x[targetKey] == item[targetKey])]))
 /*uncomment to flatten array*/ //.values()
];

console.log(groupedArray);

   /*EXPECTED OUTPUT
       [
  [
    "foo",
    [
      {
        "id": "id1",
        "sourceDesc": "foo",
        "prop1": "ignoreme",
        "prop2": "ignoreme"
      },
      {
        "id": "id2",
        "sourceDesc": "foo",
        "prop1": "ignoreme",
        "prop2": "ignoreme"
      }
    ]
  ]
]
   */

Answer 10

Check out this alternative method for grouping JSON arrays by key using the map function:

const inputArray = [{"id":"id1","sourceDesc":"foo","prop1":"ignoreme","prop2":"ignoreme"},{"id":"id2","sourceDesc":"foo","prop1":"ignoreme","prop2":"ignoreme"},{"id":"id3","sourceDesc":"bar","prop1":"ignoreme","prop2":"ignoreme"},{"id":"id4","sourceDesc":"baz","prop1":"ignoreme","prop2":"ignoreme"}];

const targetKey = 'sourceDesc';

const groupedArray = [...new Map(inputArray.map(item =>
  [item[targetKey], inputArray.filter(x=>x[targetKey] == item[targetKey])]))
 /*uncomment to flatten array*/ //.values()
];

console.log(groupedArray);

   /*EXPECTED OUTPUT
       [
  [
    "foo",
    [
      {
        "id": "id1",
        "sourceDesc": "foo",
        "prop1": "ignoreme",
        "prop2": "ignoreme"
      },
      {
        "id": "id2",
        "sourceDesc": "foo",
        "prop1": "ignoreme",
        "prop2": "ignoreme"
      }
    ]
  ]
]
   */

Answer 11

Answer №6

To achieve this, we can utilize the forEach method and create an object with keys corresponding to the values of sourceDesc.

const sourceArray = [
  { id: "id1", sourceDesc: "foo", prop1: "ignoreme", prop2: "ignoreme" },
  { id: "id2", sourceDesc: "foo", prop1: "ignoreme", prop2: "ignoreme" },
  { id: "id3", sourceDesc: "bar", prop1: "ignoreme", prop2: "ignoreme" },
  { id: "id4", sourceDesc: "baz", prop1: "ignoreme", prop2: "ignoreme" }
];

const update = data => {
  const res = {};
  data.forEach(({ sourceDesc, ...item }) => {
    if (!res[sourceDesc]) {
      res[sourceDesc] = { desc: sourceDesc, ids: [] };
    }
    res[sourceDesc].ids.push(item);
  });
  return Object.values(res);
};

console.log(update(sourceArray));

Answer 12

To achieve this, we can utilize the forEach method and create an object with keys corresponding to the values of sourceDesc.

const sourceArray = [
  { id: "id1", sourceDesc: "foo", prop1: "ignoreme", prop2: "ignoreme" },
  { id: "id2", sourceDesc: "foo", prop1: "ignoreme", prop2: "ignoreme" },
  { id: "id3", sourceDesc: "bar", prop1: "ignoreme", prop2: "ignoreme" },
  { id: "id4", sourceDesc: "baz", prop1: "ignoreme", prop2: "ignoreme" }
];

const update = data => {
  const res = {};
  data.forEach(({ sourceDesc, ...item }) => {
    if (!res[sourceDesc]) {
      res[sourceDesc] = { desc: sourceDesc, ids: [] };
    }
    res[sourceDesc].ids.push(item);
  });
  return Object.values(res);
};

console.log(update(sourceArray));

Using reduce() to group items in an array based on a specific object property

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

I have developed a website that can calculate the factorial of any given number. The next step is to design a function that will display the step-by-step mathematical process

Steps to display the leave site prompt during the beforeunload event once a function has finished running

Generating elevation graph from a kml file with the combination of php and javascript

Activate filtering beyond the AngularJS datatable

Dynamic jquery panel that remains expanded while concealing the menu on large screens

What is the process of integrating an HTML web component with an HTML file? Can I use innerHTML = foo("myfile.html") to achieve

When utilizing exit-hook with process.on('SIGTERM'), child_process spawn requires two control-c commands to exit properly

Is there a way to organize a list of arrays within a loop based on a specific index within each array in JavaScript?

Gain access to JSON information and store it in the datasource variable using the Kendo datasource function

Incorporating a dynamic fill effect into an SVG pie chart

Invoke the javascript function by referencing the JavaScript file

Tips on finding the ID of a textbox using the cursor's position

Implementing Text Box Control Validation within a Gridview using UpdatePanel in c# ASP.Net

Upon reloading, the dynamically generated table does not appear accurately

The file 'index.js' does not have a default export

Expanding the jQuery AutoComplete Plugin: A Guide to Implementing the bind keyup Event

Using Vue.js to Delete an Element from an Array

Strange actions observed in JavaScript addition operations

Adapt vanilla JavaScript code to be compatible with Node.js, MongoDB, and Express framework

Utilizing angular.forEach in $scope to extract data from an array