如何在reactjs中呈現JSON數據？

這是我的people.js文件，它包含兩個人的數據。如何在reactjs中呈現JSON數據？

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;

這是我的PeopleList.jsx。這兩個文件都在同一個目錄中。

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

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

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

module.exports = PeopleList;

誰能告訴我如何呈現從people.js兩個名字（Ruben和丹尼爾）文件到屏幕（無序列表內）？請提供代碼。

在此先感謝。

來源

2017-09-23 Nitin Bisht

純代碼編寫請求是題外話堆棧溢出 - 我們希望涉及到的具體* *編程的問題在這裏問題 - 但我們會很樂意幫助你自己寫吧！告訴我們 [你試過的東西]（https://stackoverflow.com/help/how-to-ask），以及你卡在哪裏。這也將幫助我們更好地回答你的問題。 – glennsl

這應做到：

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

來源

2017-09-23 14:38:04 JulienD

它顯示了x.name.first兩次。 –

編輯前我已經忘記了花括號，它應該與當前的答案一起工作。 – JulienD

Yahh我知道但我添加了它。現在它正在工作。謝謝 –

可以使用ES6這樣做。

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

然後映射它。

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

來源

2017-09-23 14:51:49

如何在reactjs中呈現JSON數據？

回答

相關問題