Transforming an array of JavaScript objects into arrays of key-value pairs based on a specific property with ES6 syntax

Question

Transforming an array of JavaScript objects into arrays of key-value pairs based on a specific property with ES6 syntax

Consider an array of objects like this:

myArray = [
  {name: 'First', parent: 1, delta: 2},
  {name: 'Second', parent: 1, delta: 1},
  {name: 'Third', parent: 2, delta: 1}
];

The goal is to transform this array into an object with parent keys and corresponding values. For example:

result = {
  1: [
       {name: 'First', parent: 1, delta: 2},
       {name: 'Second', parent: 1, delta: 1}
     ],
  2: [
       {name: 'Third', parent: 2, delta: 1}
     ]
}

To achieve this using a concise ES6 syntax that allows for operations such as sorting by delta, we can explore alternative methods beyond traditional loops.

javascript arrays typescript object

Answer 1

Answer №1

If you need to group elements by a specific key, you can utilize the Array.reduce() method like this:

let items = [{
    name: 'First',
    type: 1,
    value: 2
  },
  {
    name: 'Second',
    type: 1,
    value: 1
  },
  {
    name: 'Third',
    type: 2,
    value: 1
  }
];
var groupedItems = items.reduce((acc, item) => {
  if (acc[item.type]) {
    acc[item.type].push(item);
  } else {
    acc[item.type] = [item];
  }
  return acc;
}, {});
console.log(groupedItems);

Answer 2

If you need to group elements by a specific key, you can utilize the Array.reduce() method like this:

let items = [{
    name: 'First',
    type: 1,
    value: 2
  },
  {
    name: 'Second',
    type: 1,
    value: 1
  },
  {
    name: 'Third',
    type: 2,
    value: 1
  }
];
var groupedItems = items.reduce((acc, item) => {
  if (acc[item.type]) {
    acc[item.type].push(item);
  } else {
    acc[item.type] = [item];
  }
  return acc;
}, {});
console.log(groupedItems);

Answer 3

Answer №2

To accomplish this task, you have the option of utilizing the reduce method.

var data = [
  {name: 'First', parent: 1, delta: 2},
  {name: 'Second', parent: 1, delta: 1},
  {name: 'Third', parent: 2, delta: 1}
];

var output = data.reduce((obj, item) =>
             (
               obj[item.parent] = (obj[item.parent] || []).concat(item)
               , obj
             )
             , {})
console.log(output)

Answer 4

To accomplish this task, you have the option of utilizing the reduce method.

var data = [
  {name: 'First', parent: 1, delta: 2},
  {name: 'Second', parent: 1, delta: 1},
  {name: 'Third', parent: 2, delta: 1}
];

var output = data.reduce((obj, item) =>
             (
               obj[item.parent] = (obj[item.parent] || []).concat(item)
               , obj
             )
             , {})
console.log(output)

Answer 5

Answer №3

let animals = [
  {species: 'Lion', habitat: 'Savannah', status: 'Endangered'},
  {species: 'Giraffe', habitat: 'Grasslands', status: 'Vulnerable'},
  {species: 'Elephant', habitat: 'Forest', status: 'Threatened'}
];

console.log(animals.reduce((acc, val)=>({...acc, [val.habitat]: (acc[val.habitat] || []).concat(val)}), {}))

Answer 6

let animals = [
  {species: 'Lion', habitat: 'Savannah', status: 'Endangered'},
  {species: 'Giraffe', habitat: 'Grasslands', status: 'Vulnerable'},
  {species: 'Elephant', habitat: 'Forest', status: 'Threatened'}
];

console.log(animals.reduce((acc, val)=>({...acc, [val.habitat]: (acc[val.habitat] || []).concat(val)}), {}))

Answer 7

Answer №4

let groupedArray = myArray.reduce((grouped, element) => {
  if (grouped[element.parent]) grouped[element.parent].push(element);
  else grouped[element.parent] = [element];
  return grouped;
}, {});

Answer 8

let groupedArray = myArray.reduce((grouped, element) => {
  if (grouped[element.parent]) grouped[element.parent].push(element);
  else grouped[element.parent] = [element];
  return grouped;
}, {});

Transforming an array of JavaScript objects into arrays of key-value pairs based on a specific property with ES6 syntax

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the procedure for verifying the type of an element using chai?

Customizing content based on Route - Utilizing Node.js/React

Create a dynamic select2 field based on the value selected in another dropdown menu

Updating div content dynamically with Jquery and PHP variable

JavaScript's setAttribute function is not functioning as expected

How to manage multiple items within a single MUI/React TextField

What could be causing the readTextFile function to return undefined?

Node.js allows for keeping pipe and sockets open even after streaming an HTTP response

specialized registration process with auth0 in Angular

The npm package for google-spreadsheet.js is experiencing issues and is not functioning correctly when trying to replicate the GitHub

Access an attribute using slashes in Jquery

"Troubleshooting: Why is the onError event not triggering

Asynchronous functions return objects that transform into '[Object]' representations

Retrieve all records from the query and store them in an array, then output a singular value

tips for concealing a row in the mui data grid

Errors are not displayed or validated when a FormControl is disabled in Angular 4

Transferring data from AJAX to PHP

Is there a way to deliver information to a specific element on a client's HTML page?

Unable to establish a connection with the default port on Mongo DB while utilizing Node.js

Coinciding titles within flot pie chart