Question

187

Iterating over JSON in React

rated 0 times [ 192] [ 5] / answers: 1 / hits: 93442 / 7 Years ago, thu, june 1, 2017, 12:00:00

I have following code:

export class Highlights extends React.Component {

    render() {

        return (

            <div>

                {JSON.stringify(this.props.highlights_data.data)}

            </div>

        )

    }

}

This prints out the following:

{active:{label:Active,value:12},automatic:{label:Automatic,value:8},waiting:{label:Waiting,value:1},manual:{label:Manual,value:3}}

How can I iterate over the highlights_data.data props to call another Component passing down label and value ?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

margaritakristinak

Add To Favorites

Follow

Total Points: 502

Total Questions: 127

Total Answers: 98

Location: England

Member since Mon, May 17, 2021

3 Years ago

answered 7 Years ago mckenna · Accepted Answer

Except for @Dan's answer, I don't believe the other answers are any helpful/useful to you as they don't iterate through your JSON object.

To do this properly, you would need to iterate through each of your keys in your JSON object. There are a few ways you can do this, one of which is with Object.keys(). Like the code snippet below.

This solution iterates through each key in your JSON object and pushes it into an array. Once you have that array, you can iterate through it with map(), as you would normally, and pass your relevant props down to another child component.:

class MyApp extends React.Component {

  render() {

    var json = {active:{label:Active,value:12},automatic:{label:Automatic,value:8},waiting:{label:Waiting,value:1},manual:{label:Manual,value:3}};

    var arr = [];

    Object.keys(json).forEach(function(key) {

      arr.push(json[key]);

    });

    return <ul>{arr.map(item => <MyAppChild key={item.label} label={item.label} value={item.value} />)}</ul>;

  }

}



class MyAppChild extends React.Component {

  render() {

    return <li>{this.props.label +  -  + this.props.value}</li>;

  }

}



ReactDOM.render(<MyApp />, document.getElementById('myapp'));

<script src=https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js></script>

<script src=https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js></script>

<div id=myapp></div>