How to render JSON data in reactjs?

Question

This is my people.js file.It contains data of two people.

var Data = [
        {
            "gender": "male",
            "name": {
              "title": "mr",
              "first": "ruben",
              "last": "dean"
            },
            "location": {
              "street": "3070 york road",
              "postcode": "LP0 5PG"
            },
            "email": "[email protected]",
            "login": {
              "username": "crazydog764",
              "password": "kane",
              "sha256": "58841f853bffca51507549428aee2a6c14863c8219e5a4b563d58a5b97564c92"
            },
            "picture": {
              "large": "https://randomuser.me/api/portraits/men/96.jpg",
              "thumbnail": "https://randomuser.me/api/portraits/thumb/men/96.jpg"
            },
            "nat": "GB"
        },
        {
            "gender": "male",
            "name": {
              "title": "mr",
              "first": "daniel",
              "last": "king"
            },
            "location": {
              "street": "7618 taylor st",
              "postcode": 35059
            },
            "email": "[email protected]",
            "login": {
              "username": "silvergorilla983",
              "password": "1a2b3c4d",
              "sha256": "df4eeb09df18d02d7fa49534a2cd6a03587d361f17aa7596d8ed7c025c5cb4d4"
            },
            "picture": {
              "large": "https://randomuser.me/api/portraits/men/21.jpg",
              "thumbnail": "https://randomuser.me/api/portraits/thumb/men/21.jpg"
            },
            "nat": "US"
        }
    ]

    module.exports = Data;

This is my PeopleList.jsx. Both files are in the same directory.

var React = require('react');
var Data = require('people');

var PeopleList = React.createClass({
    render: function () {
        return (
            <div>
              <ul>

              </ul>
            </div>
        );
    }
});

module.exports = PeopleList;

Can anyone tell me how to render both names (Ruben and Daniel) from the people.js file into the screen (within the unordered list)? Please provide code.

Thanks in advance.

Pure code-writing requests are off-topic on Stack Overflow -- we expect questions here to relate to specific programming problems -- but we will happily help you write it yourself! Tell us what you've tried, and where you are stuck. This will also help us answer your question better. — glennsl
– glennsl, Commented Sep 23, 2017 at 19:18

JulienD · Accepted Answer · 2017-09-23 14:38:04Z

3

This should do it:

<ul>
    {Data.map(x => <li>{x.name.first}</li>)}
</ul>

answered Sep 23, 2017 at 14:38

JulienD

7,32310 gold badges57 silver badges88 bronze badges

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

2 Comments

JulienD Over a year ago

I had forgotten the curly braces before editing, it should work with the current answer.

Nitin Bisht Over a year ago

Yahh I know but I added it. Now it is working. Thanks

Ravindra Ranwala · Accepted Answer · 2017-09-23 14:51:49Z

1

You can do it using ES6 like this.

import {Data} from './path/to/people.json'

Then map over it.

Dara.map(person => console.log(person.name))

answered Sep 23, 2017 at 14:51

Ravindra Ranwala

21.2k7 gold badges50 silver badges65 bronze badges

Collectives™ on Stack Overflow

How to render JSON data in reactjs?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related