如何訪問個人數據在JSON數據

Question

我從服務器這樣

[{ 
    "_id": "588b3731d4428e2ff05ddefa", 
    "Id": 50, 
    "Name": "Vishruth", 
    "Age": 11 
}, { 
    "_id": "588b45df255e323de55ac333", 
    "Id": 51, 
    "Name": "Vishruth", 
    "Age": 11 
}] 

如何從它

import React from 'react'; 

    import axios from 'axios'; 
    //require('./style.scss'); 


     class Premontessori extends React.Component{ 
      constructor(props){ 
      super(props); 
      this.state={ 
       post:[] 
      }; 

      } 


     componentDidMount(){ 
      let self = this; 
      axios.get('http://localhost:8080/list') 
      .then(function(data) { 
       console.log(data); 
       self.setState({post:data}); 
       }); 
      } 


      render(){ 


      return(
      <div> 

      {JSON.stringify(this.state.post.data)} 


     </div> 

      ); 
      } 
     } 
     export default Premontessori; 

Answer 1

你data is an array訪問個人數據接收JSON數據。您可以簡單地在陣列的所有元素上使用map to loop，然後使用dot表示法或bracket表示法訪問javascript object的各個元素。

class Premontessori extends React.Component{ 
 
      constructor(props){ 
 
      super(props); 
 
      this.state={ 
 
       post:[] 
 
      }; 
 

 
      } 
 

 

 
componentDidMount(){ 
 
      var data = [{ 
 
         "_id": "588b3731d4428e2ff05ddefa", 
 
         "Id": 50, 
 
         "Name": "Vishruth", 
 
         "Age": 11 
 
        }, { 
 
         "_id": "588b45df255e323de55ac333", 
 
         "Id": 51, 
 
         "Name": "Vishruth", 
 
         "Age": 11 
 
        }] 
 

 
       this.setState({post:data}); 
 
      
 
      } 
 

 

 
render(){ 
 
    return(
 
     <div> 
 
     <tbody> 
 
     {this.state.post.map(function(item, index) { 
 
      return (
 
       <tr> 
 
        <td>{item._id}</td> 
 
        <td>{item.Id}</td> 
 
        <td>{item.Name}</td> 
 
        <td>{item.Age}</td> 
 
       </tr> 
 
      ) 
 
     }) 
 
     }</tbody> 
 
     </div> 
 
     
 
    ) 
 
} 
 
} 
 

 
ReactDOM.render(<Premontessori/>, document.getElementById("app"));

<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="app"><div>