F
F
Felino2018-05-22 14:38:56
JSON
Felino, 2018-05-22 14:38:56

iterate json reactjs?

json
[{
    "general": {
      "Name": "Liana",
      "Name1": "Crooks",
      "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/kevinoh/128.jpg"
    },
    "job": {
      "company": "Ledner, Johnson and Predovic",
      "title": "Investor Functionality Coordinator"
    },
    "contact": {
      "email": "[email protected]",
      "phone": "(895) 984-0132"
    },
    "address": {
      "street": "1520 Zemlak Cove",
      "city": "New Devon",
      "zipCode": "42586-7898",
      "country": "Guinea-Bissau"
    }
  },
  {
    "general": {
      "Name": "Deontae",
      "Name1": "Dare",
      "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/andysolomon/128.jpg"
    },
    "job": {
      "company": "D'Amore, Dicki and Borer",
      "title": "International Applications Consultant"
    },
    "contact": {
      "email": "[email protected]",
      "phone": "1-615-843-3426 x600"
    },
    "address": {
      "street": "65901 Glover Terrace",
      "city": "Alden ton",
      "zipCode": "57744-4248",
      "country": "Kenya"
    }
  }]

the code
var myObject = JSON.parse('[{\n' +
        '    "general": {\n' +
        '      "Name": "Liana",\n' +
        '      "Name1": "Crooks",\n' +
        '      "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/kevinoh/128.jpg"\n' +
        '    },\n' +
        '    "job": {\n' +
        '      "company": "Ledner, Johnson and Predovic",\n' +
        '      "title": "Investor Functionality Coordinator"\n' +
        '    },\n' +
        '    "contact": {\n' +
        '      "email": "[email protected]",\n' +
        '      "phone": "(895) 984-0132"\n' +
        '    },\n' +
        '    "address": {\n' +
        '      "street": "1520 Zemlak Cove",\n' +
        '      "city": "New Devon",\n' +
        '      "zipCode": "42586-7898",\n' +
        '      "country": "Guinea-Bissau"\n' +
        '    }\n' +
        '  },\n' +
        '  {\n' +
        '    "general": {\n' +
        '      "Name": "Deontae",\n' +
        '      "Name1": "Dare",\n' +
        '      "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/andysolomon/128.jpg"\n' +
        '    },\n' +
        '    "job": {\n' +
        '      "company": "D\'Amore, Dicki and Borer",\n' +
        '      "title": "International Applications Consultant"\n' +
        '    },\n' +
        '    "contact": {\n' +
        '      "email": "[email protected]",\n' +
        '      "phone": "1-615-843-3426 x600"\n' +
        '    },\n' +
        '    "address": {\n' +
        '      "street": "65901 Glover Terrace",\n' +
        '      "city": "Alden ton",\n' +
        '      "zipCode": "57744-4248",\n' +
        '      "country": "Kenya"\n' +
        '    }\n' +
        '  }]')
    console.log(myObject)

    class People extends React.Component {
        render() {
            return <div>
            <h1 >{this.Name}</h1>
                <h1>{this.Name1}</h1>
                <h1 >{this.company}</h1>
                <h1>{this.street}</h1>
            </div>;
        }
    }
    ReactDOM.render(
        <div>
        <People  />
        </div>,
        document.getElementById('root')
    );


Tell me how to correctly display a variable in the People class.
That is, there should be two
Name
Name1
company
street
I'm trying through Array.map But even it doesn't work!

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question