我如何访问json数据中的个别数据

Question

我正在从服务器接收json数据，就像这样

[{
    "_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。您可以在数组的所有元素上使用map to loop，然后使用javascript object表示法或dot表示法访问bracket的各个元素。

＆＃13;

＆＃13;

 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"));

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;