Iterate Object Keys to Arrays in React/ES6 [duplicate]

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 (with less information) because the other was closed doesn't make the question any better... — Andreas
– Andreas, Commented Sep 7, 2021 at 8:17
React isn't relevant here; and your callback function logs the literal string "item" instead of the item variable's value. — user5734311
– user5734311, Commented Sep 7, 2021 at 8:18
you can use declarative syntax: Object.keys(newData).map(item => [{item, newData[item]}]) — Martin Rützy
– Martin Rützy, Commented Sep 7, 2021 at 8:18
const data = Object.entries(newData).map(([key, value]) => ({ key, value })); — user5734311
– user5734311, Commented Sep 7, 2021 at 8:21

DecPK · Accepted Answer · 2021-09-07 10:29:28Z

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 7, 2021 at 10:29

answered Sep 7, 2021 at 8:16

DecPK

25.4k6 gold badges32 silver badges46 bronze badges

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

16 Comments

Andreas Over a year ago

"Instead of..." - Or just close it as an obvious dupe.

Joseph Over a year ago

Thank you, on top of that, how do you a static key value pair if you want? Thanks\

DecPK Over a year ago

what do you mean by static key-value pair

Joseph Over a year ago

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] })); ?

DecPK Over a year ago

where do you want to add? In the result array? If yes then you need to specify the position because result is an array.

|

Alish Giri · Accepted Answer · 2021-09-07 08:21:51Z

0

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)

answered Sep 7, 2021 at 8:21

Alish Giri

2,27225 silver badges23 bronze badges

Collectives™ on Stack Overflow

Iterate Object Keys to Arrays in React/ES6 [duplicate]

2 Answers 2

16 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

16 Comments

Comments

Linked

Related