Iterate Object Keys to Arrays in React/ES6

Question

I wanted to iterate the keys and values to be an array in es6 or react. Pls check my code below:

const newData = {
    "id": 111,
    "name": "ewfwef",
    "description": "Hello"
}

const data = Object.keys(newData).forEach((item) => {console.log("item", newData[item])})

EXPECTED OUTPUT

[
  {
    key: id,
    value: 111
  }, 
  {
    key: name,
    value: 'ewfef'
  },
  {
    key: description,
    value: 'Hello'
  }
]

Asking the [same question again](https://stackoverflow.com/questions/69084385/iterate-object-keys-in-es6-and-react) (with less information) because the other was closed doesn't make the question any better... — Andreas, Sep 07 '21 at 08:17
React isn't relevant here; and your callback function logs the literal string `"item"` instead of the `item` variable's value. — , Sep 07 '21 at 08:18
you can use declarative syntax: `Object.keys(newData).map(item => [{item, newData[item]}])` — Martin Rützy, Sep 07 '21 at 08:18
`const data = Object.entries(newData).map(([key, value]) => ({ key, value }));` — , Sep 07 '21 at 08:21

DecPK · Accepted Answer · 2021-09-07T10:29:28.060

1

Instead of using forEach, you can use the map to get the desired result

const newData = {
  id: 111,
  name: "ewfwef",
  description: "Hello",
};

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

console.log(data);

You can add two keys in two ways:

1) If you don't want to change the resulting array then you can push elements in the array

const newData = {
  id: 111,
  name: "ewfwef",
  description: "Hello",
};

const data = Object.keys(newData).map((key) => ({ key, value: newData[key] }));
data.push({ key: "day", value: "monday" });
data.push({ key: "week", value: "7th" });

console.log(data);

2) Or you can both key-value in the source object

const newData = {
  id: 111,
  name: "ewfwef",
  description: "Hello",
  day: "monday",
  week: "7th",
};

const data = Object.keys(newData).map((key) => ({ key, value: newData[key] }));
console.log(data);

edited Sep 07 '21 at 10:29

answered Sep 07 '21 at 08:16

DecPK

24,537
6
26
42

1

_"Instead of..."_ - Or just close it as an obvious dupe. – Andreas Sep 07 '21 at 08:18
Thank you, on top of that, how do you a static key value pair if you want? Thanks\ – Joseph Sep 07 '21 at 09:23
what do you mean by static `key-value` pair – DecPK Sep 07 '21 at 09:23
Let's say you want to add this `{day: 'Monday', week: '7th'}` on that on this `Object.keys(newData).map((key) => ({ key, value: newData[key] }));` ? – Joseph Sep 07 '21 at 09:28
where do you want to add? In the result array? If yes then you need to specify the position because result is an array. – DecPK Sep 07 '21 at 09:30
Inside this one `Object.keys(newData).map((key) => ({ key, value: newData[key] }));`. Just put on the last parts – Joseph Sep 07 '21 at 09:36
I'm not able to understand, Would you please add desired result as code. – DecPK Sep 07 '21 at 09:40
Can we do like this? I want to add this like this `Object.keys(newData).map((key) => ({ key, value: newData[key] }, {day: 'Monday', week: '7th'}));` – Joseph Sep 07 '21 at 09:41
Value should be same thing `[ { key: id, value: 111 }, { key: name, value: 'ewfef' }, { key: description, value: 'Hello' }, { key: day, value: 'monday' }, { key: week, value: '7th' } ]` – Joseph Sep 07 '21 at 09:43
You can but the result that you will get is may not be what you want. Do you want to add `day` and `week` property in all objects? – DecPK Sep 07 '21 at 09:43
As `result` object is an array then you can push any number of object like `data.push({ key: "day", value: "monday" });` – DecPK Sep 07 '21 at 09:45
I want to add together thats why I do like this `Object.keys(newData).map((key) => ({ key, value: newData[key] }, {day: 'Monday', week: '7th'}));` How would you do it? – Joseph Sep 07 '21 at 09:46
You can do this. If you do this then you will get 3 objects in an array exactly same as `{day: 'Monday', week: '7th'}` – DecPK Sep 07 '21 at 09:48
No, i don't like 3 objects in the array. I wanted it like this https://pasteboard.co/KjtRvP3.png – Joseph Sep 07 '21 at 09:52
Then you have to push the last 2 objects manually, If your dataset doesn't change... – DecPK Sep 07 '21 at 09:54
How do i do it? I wanted one code only. Can you include on this one? `Object.keys(newData).map((key) => ({ key, value: newData[key] }));` – Joseph Sep 07 '21 at 09:55

score 0 · Answer 2 · answered Sep 07 '21 at 08:21

You can use Object.entries and map to achieve this,

  const newData = {
        "id": 111,
        "name": "ewfwef",
        "description": "Hello"
    }
    
    const data = Object.entries(newData).map(function(item) {
      return {key: item[0], value: item[1]};
    });
    
    console.log(data)

Iterate Object Keys to Arrays in React/ES6

2 Answers2