代码之家  ›  专栏  ›  技术社区  ›  Nitin Bisht

如何在reactjs中呈现JSON数据?

  •  5
  • Nitin Bisht  · 技术社区  · 9 年前

    var Data = [
            {
                "gender": "male",
                "name": {
                  "title": "mr",
                  "first": "ruben",
                  "last": "dean"
                },
                "location": {
                  "street": "3070 york road",
                  "postcode": "LP0 5PG"
                },
                "email": "ruben.dean@example.com",
                "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": "daniel.king@example.com",
                "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;
    

    var React = require('react');
    var Data = require('people');
    
    var PeopleList = React.createClass({
        render: function () {
            return (
                <div>
                  <ul>
    
                  </ul>
                </div>
            );
        }
    });
    
    module.exports = PeopleList;
    

    提前谢谢。

    2 回复  |  直到 9 年前
        1
  •  3
  •   JulienD    9 年前

    <ul>
        {Data.map(x => <li>{x.name.first}</li>)}
    </ul>
    
        2
  •  1
  •   Ravindra Ranwala    9 年前

    您可以像这样使用ES6。

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

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