Creating an array from each key in an array of objects

Question

I have an array that looks similar to this: The array of objects is much larger and each object has more properties, this is the structure though.

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

I want to create an array for each key in this array so I have an array with all ids, an array with all names, and one with all hatColors.

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

I won't know exactly what the array of objects looks like as it is returned from another script.

What I have tried is:

  for (var [key, value] of Object.entries(arr)) {
    for (var [key, value] of Object.entries(value)) {
      var result = arr.map(({ key }) => key);
      console.log(result);
    }
  }

This returns an array of undefined. I hope there is a way to do this, I don't want to write a lot of hard coded if push statements to get this to work.

Thanks.

Your map function is attempting to destructure key from the objects in arr, but there's no such property. Also Object.entries(arr) seems unusual; you can iterate over an array in easier ways. — Dave Newton
– Dave Newton, Commented May 6, 2022 at 18:34
As per your comment on the answer: if you don't actually know what the keys are (which is important information) I'd take a different approach: an object keyed by the keys in the array objects with an array of their extracted values. This also allows a single iteration of the array instead of one for each property you want to extract. — Dave Newton
– Dave Newton, Commented May 6, 2022 at 18:39

Spectric · Accepted Answer · 2022-05-06 18:39:37Z

2

You can use Array.map to extract the property values for each item in the array.

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

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

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

If you want to automatically generate the arrays, you can do so by getting the properties of each object in the array, then fetching the values and storing them in an object.

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

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

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

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

console.log(result)

edited May 6, 2022 at 18:39

answered May 6, 2022 at 18:33

Spectric

32.6k6 gold badges32 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Eric.18 Over a year ago

But what if I don't know the keys or values? just that is an array of objects with keys and values? This would work but then I have to write roughly 100 groupPropValues() knowing the names.

Eric.18 Over a year ago

@Spectirc, Accepted. Thank you so much. You are a genius. Seriously.

Collectives™ on Stack Overflow

Creating an array from each key in an array of objects

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related