React Object of Objects - How to loop through

Question

I have the following encoded JSON:

const data = JSON.parse('{"first":{"aaa":"111","bbb":"2222"},"second":{"aaa":"111","bbb":"2222"}}')

After decoding as follows:

{
  "first": {
    "aaa": "111",
    "bbb": "2222"
  },
  "second": {
    "aaa": "111",
    "bbb": "2222"
  }
}

I've then tried a few a number of ways to loop through this data as follows but not work as expected:

{Object.keys(data).map((key, value) =>
    console.log(key);
    <li>{value.aaa}</li>
)}

I can console.log out the data and see it loops but I can't see to display the aaa or bbb values.

What am I doing wrong here?

The second parameter inside map is the index of the element. Change your code to data[key].aaa inside the li element to get the desired value. — Nitish Phanse
– Nitish Phanse, Commented Sep 7, 2017 at 3:04

Harsh Makadia · Accepted Answer · 2017-09-07 03:14:19Z

1

You can assign a variable that holds value.

var a = {
  "first": {
  "aaa": "111",
  "bbb": "2222"
},
"second": {
 "aaa": "111",
 "bbb": "2222"
 }
}

use following to get the keys :

 var keys = Object.keys(a);

Finally iterate over it :

for(var i = 0; i < keys.length; i++) { 
    var key = (keys[i]) ; 
    console.log(a[key]) 
}

answered Sep 7, 2017 at 3:14

Harsh Makadia

3,4436 gold badges36 silver badges43 bronze badges

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

Comments

Govind Rai · Accepted Answer · 2017-09-07 03:18:35Z

1

Use a for in loop:

{for (key in data) {
    for (innerKey in data[key]) {
        <li>{data[key][innerKey]}</li>
    }
}}

The reason we need to use brackets around key and innerKey is because those properties will need to be computed first.

edited Sep 7, 2017 at 3:18

answered Sep 7, 2017 at 3:05

Govind Rai

16k10 gold badges83 silver badges93 bronze badges

Comments

B.Shrestha · Accepted Answer · 2017-09-07 05:06:08Z

1

try using

{Object.keys(data).map((key, index) =>
    <li key={index}>{data[key].aaa}</li>
)}

answered Sep 7, 2017 at 5:06

B.Shrestha

1365 bronze badges

Comments

Alejandro Lasebnik · Accepted Answer · 2021-12-19 10:27:43Z

0

I succeeded to run your code. It was basically ok, just need to change the property name "key" from .map since it conflicts with a react keyword.

 {Object.keys(data).map((label, index) => (
                <div key={index}>{data[label].aaa}</div>
            ))}

answered Dec 19, 2021 at 10:27

Alejandro Lasebnik

8848 silver badges11 bronze badges

Collectives™ on Stack Overflow

React Object of Objects - How to loop through

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related