Methods for reducing arrays in JavaScript

Question

Methods for reducing arrays in JavaScript

Is there a way to transform an array of objects into an object with one of the properties as a key?

What is the best method to achieve this conversion?


const data = [
  {
    id: "first",
    name: "Product 1",
    type: "selection"
  },
  {
    id: "second",
    name: "Product 2",
    type: "text"
  },
  {
    id: "third",
    name: "Product 3",
    type: "csv"
  }
]

Desired output:

{
  first: { name: 'Product 1', type: 'selection' },
  second: { name: 'Product 2', type: 'text' },
  third: {name: 'Product 3', type: 'csv' },

}

Can this be achieved using the ARRAY.REDUCE METHOD?

javascript arrays object reduce

Answer 1

Answer №1

test

const details = [
  {
    id: "one",
    name: "Item A",
    category: "selection"
  },
  {
    id: "two",
    name: "Item B",
    category: "text"
  },
  {
    id: "three",
    name: "Item C",
    category: "csv"
  }
] 
const newObj = Object.fromEntries(details.map(val => [val.id, val]));

console.log(newObj);

Answer 2

test

const details = [
  {
    id: "one",
    name: "Item A",
    category: "selection"
  },
  {
    id: "two",
    name: "Item B",
    category: "text"
  },
  {
    id: "three",
    name: "Item C",
    category: "csv"
  }
] 
const newObj = Object.fromEntries(details.map(val => [val.id, val]));

console.log(newObj);

Answer 3

Answer №2

Take a look at this

const information = [
  {
    id: "first",
    name: "Item 1",
    type: "selection"
  },
  {
    id: "second",
    name: "Item 2",
    type: "text"
  },
  {
    id: "third",
    name: "Item 3",
    type: "csv"
  }
]

const outcome = {};
information.forEach(info=>{
   outcome[info.id] = {
   name: info.name,
    type:info.type
  }
});

Answer 4

Take a look at this

const information = [
  {
    id: "first",
    name: "Item 1",
    type: "selection"
  },
  {
    id: "second",
    name: "Item 2",
    type: "text"
  },
  {
    id: "third",
    name: "Item 3",
    type: "csv"
  }
]

const outcome = {};
information.forEach(info=>{
   outcome[info.id] = {
   name: info.name,
    type:info.type
  }
});

Answer 5

Answer №3

Learn how to utilize Array.reduce() with this example:

const data = [
  {
    id: "first",
    name: "Product 1",
    type: "selection"
  },
  {
    id: "second",
    name: "Product 2",
    type: "text"
  },
  {
    id: "third",
    name: "Product 3",
    type: "csv"
  }
];

const result = data.reduce((acc, obj) => {
  const { id, ...rest } = obj;
  acc[id] = rest;
  return acc;
}, {});

console.log(result);

Answer 6

Learn how to utilize Array.reduce() with this example:

const data = [
  {
    id: "first",
    name: "Product 1",
    type: "selection"
  },
  {
    id: "second",
    name: "Product 2",
    type: "text"
  },
  {
    id: "third",
    name: "Product 3",
    type: "csv"
  }
];

const result = data.reduce((acc, obj) => {
  const { id, ...rest } = obj;
  acc[id] = rest;
  return acc;
}, {});

console.log(result);

Methods for reducing arrays in JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Analyze the JSON data retrieved from the API endpoint to determine any

Implementing event listeners with AngularJS after making a POST request

Create an input box with a designated class

What is the best way to locate the offspring of a parent div using its data attribute?

Storing Values with RxJava on Android

Passing data between Service and Component using Angular Binding

Accessing a property that doesn't exist on a union type in Phaser using TypeScript

howler.js resumes playing sprite sound after being paused

populate first and then aggregate all the data in mongoose

Verify whether the user's email is registered in the database

"Counting Down with PHP and jQuery : A Dynamic

Is spine.js truly capable of 'streamlining' POST requests?

Slide toggle in jQuery reveals itself briefly before vanishing

Exploring the method of retrieving object properties from JSON with BeautifulSoup and Python

Updating Button Color Based on Input Field Value in EJS

Are there any CSS hacks available to address the combination of position: sticky and overflow within the parent element?

Using Json.Net, Object[] can be defined with strong typing

Utilizing react-router in conjunction with an Express server

Create a submit button using Vue.js for text input

Raycasting in three.js - mouse pointer and highlighting not precisely aligned with intersected mesh