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

Encountering a Problem with Chart.js Library During Online Tutorial on YouTube

Designing an image transformation page by segmenting the image into fragments

Are arrays being used in function parameters?

The ngOnChanges lifecycle hook is triggered only once upon initial rendering

Leveraging the power of jQuery and vanilla JavaScript to create a pop-up print window for a Div element within a CMS platform that does not support media query stylesheets

Is there a way to retrieve the name of a document stored within a collection using Firebase Firestore and Firebase Storage

Converting RGBA to Hex Color Code with Javascript: A Step-by-Step Guide

What causes the Cassandra client driver to provide more detailed information compared to cqlsh?

What is the best way to dynamically implement text ellipsis using CSS in conjunction with Angular 7?

Utilizing clip-path polygons for effective styling on Firefox and iOS

What sets Redux React-Native apart: Exploring the nuances between utilizing useSelector in react-redux versus connect

Nonconforming Typescript argument specification

Adding a C# variable to a URL in a Razor view using jQuery

Location of Ajax callback function

The JSON output is throwing an error because it is unable to access the property '0' since it is

The use of jquery's split() and indexOf functions may lead to the error message "Property or method not supported by the object."

Error encountered while trying to update a record using NodeJS, Express, and MySQL modules due to SQL syntax

Utilizing Express and ejs to display a JSON using the "<%" tag

Images not showing in Vue.js

AngularJS issue: Radio buttons failing to select multiple options