Generating a new array based on the keys found in a collection of objects

Question

Generating a new array based on the keys found in a collection of objects

My array structure is quite complex with multiple objects containing different properties.

  let arr = [
    { id: 1, name: "tony", hatColor: "blue" },
    { id: 2, name: "larry", hatColor: "red" },
    { id: 3, name: "stuart", hatColor: "green" },
  ];

I am looking to extract specific arrays for each key in the main array - one for ids, one for names, and one for hat colors.

idArr = [1, 2, 3];
nameArr = [tony, larry, stuart];
hatColorArr = [blue, red, green];

However, the exact structure of the array of objects may vary as it is generated dynamically.

My attempt to achieve this using nested loops and mapping has resulted in an array of undefined values. I am hoping for a more efficient way to accomplish this without hardcoding numerous if statements.

Any help or suggestions would be greatly appreciated. Thank you.

javascript arrays loops object

Answer 1

Answer №1

Utilize the Array.map method to extract the property values from each element within an array.

let arr=[{id:1,name:"tony",hatColor:"blue"},{id:2,name:"larry",hatColor:"red"},{id:3,name:"stuart",hatColor:"green"];

function extractPropertyValues(objs, prop){
    return objs.map(e => e[prop])
}

idArr = extractPropertyValues(arr, 'id');
nameArr = extractPropertyValues(arr, 'name');
hatColorArr = extractPropertyValues(arr, 'hatColor');
console.log(idArr, nameArr, hatColorArr)

If the intention is to automatically create these arrays, one can achieve this by accessing the properties of each object in the array, obtaining their values, and then storing them in a new object.

let arr=[{id:1,name:"tony",hatColor:"blue"},{id:2,name:"larry",hatColor:"red"},{id:3,name:"stuart",hatColor:"green"];

function extractPropertyValues(objs, prop) {
  return objs.map(e => e[prop])
}

const properties = [...new Set(arr.reduce((a,b) => (a.push(Object.keys(b)), a), []).flat())]

const result = properties.reduce((a,b) => (a[b] = extractPropertyValues(arr, b), a), {})

console.log(result)

Answer 2

Utilize the Array.map method to extract the property values from each element within an array.

let arr=[{id:1,name:"tony",hatColor:"blue"},{id:2,name:"larry",hatColor:"red"},{id:3,name:"stuart",hatColor:"green"];

function extractPropertyValues(objs, prop){
    return objs.map(e => e[prop])
}

idArr = extractPropertyValues(arr, 'id');
nameArr = extractPropertyValues(arr, 'name');
hatColorArr = extractPropertyValues(arr, 'hatColor');
console.log(idArr, nameArr, hatColorArr)

If the intention is to automatically create these arrays, one can achieve this by accessing the properties of each object in the array, obtaining their values, and then storing them in a new object.

let arr=[{id:1,name:"tony",hatColor:"blue"},{id:2,name:"larry",hatColor:"red"},{id:3,name:"stuart",hatColor:"green"];

function extractPropertyValues(objs, prop) {
  return objs.map(e => e[prop])
}

const properties = [...new Set(arr.reduce((a,b) => (a.push(Object.keys(b)), a), []).flat())]

const result = properties.reduce((a,b) => (a[b] = extractPropertyValues(arr, b), a), {})

console.log(result)

Generating a new array based on the keys found in a collection of objects

Answer №1

Similar questions

The issue with viewing next/image properly only occurs on desktops using a responsive layout. I would like for the image

Attempting to save the result of a fetch call into a variable for the purpose of rendering it as a list in a

What could be the reason for the malfunctioning dropdown menu in my navigation bar upon clicking it?

Develop a JavaScript library for use in the npm ecosystem

Tips for replacing the nested array object in JavaScript

Tips for transmitting an array of Objects to AngularJS

Transmitted only JSON data instead of using multiform data with jQuery Ajax

Preventing multiple tabs in a form with PHP

During the for loop, a string variable with the prefix "undefined" is

In AngularJS, enhance pagination loading by appending a $resource queried array to the end of another

Issue with alert not being triggered in browser when using HTML and JavaScript function

Having trouble getting a ForEach loop to work within promises when using mongoose?

Unable to access contextual values in NextJS

Attempting to retrieve user information from Blockstack on a web browser

Arranging based on attribute data

Instructions for displaying typed chat messages on the screen using socket.io and node.js

jQuery Validation is not functioning correctly

Stop Caching with Jquery Infinite Scroll (IAS)

Using a for loop to scrape data from websites in Python

Having trouble with a 400 Bad Request error when sending a POST request from my Vue application to my Rails API