How to map JSON Object to array with keys in javascript

Question

There's about million questions (and answers) out there on this topic, but none of them are doing what I need to do. I have a JSON object where the value for each key is an object. I want to convert this to an array and maintain the top level keys.

{
  "someKey1": {
    active: true,
    name: "foo"
  },
  "someKey2": {
    active: false,
    name: "bar"
  }
}

If I use Object.keys() I get the top level keys, but not their values. If I use Object.values() I get an array with all the values, but not their keys. I'm trying to use keys and map, but am only getting the values returned:

const data = {
  "someKey1": {
    active: true,
    name: "foo"
  },
  "someKey2": {
    active: false,
    name: "bar"
  }
}
const items = Object.keys(data).map(function(key) {
    return data[key];
});

// returns [{active: true, name: foo},{active: false, name: bar}]

Is there a way to get both? I want to get an array I can iterate over that looks something like this:

[{
    key: someKey1,
    active: true,
    name: "foo"
},
{
    key: someKey2,
    active: true,
    name: "foo"
}]

OR

[
"someKey1": {
    active: true,
    name: "foo"
},
"someKey2": {
    active: false,
    name: "bar"
}
]

Object.entries() would just give me an array of arrays containing the keys and values. I want to get to one array or objects. — thischrishall
– thischrishall, Commented Jun 4, 2022 at 21:30
Ok well the second example output you provided wouldn't be possible, since arrays can't have keys... but if you want to produce the first example (with the keys as strings), either answer should work. — skara9
– skara9, Commented Jun 4, 2022 at 21:39

Calixto González · Accepted Answer · 2022-06-04 21:30:53Z

4

I think you are going in the right direction, if you want to add the "key" property you have to map the properties manually and for the second option since you don't need the "key" property it can be done a little bit more elegantly:

For the first option:

Object.keys(data).map(v => ({
    key: v,
    ...data[v]
}));

For the second option even simpler:

Object.keys(data).map(v => ({[v]: {...data[v]}}))

edited Jun 4, 2022 at 21:30

answered Jun 4, 2022 at 21:12

Calixto González

1314 bronze badges

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

Comments

nsevens · Accepted Answer · 2022-06-04 21:14:58Z

0

You can easily map your data to a new object:

Object.keys(data).map(key => ({ ...data[key], "key": key }));

answered Jun 4, 2022 at 21:14

nsevens

2,8551 gold badge21 silver badges38 bronze badges

Collectives™ on Stack Overflow

How to map JSON Object to array with keys in javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related