how do i access individual data in json data - json

Question

I am receiving the json data from server as like this
[{
"_id": "588b3731d4428e2ff05ddefa",
"Id": 50,
"Name": "Vishruth",
"Age": 11
}, {
"_id": "588b45df255e323de55ac333",
"Id": 51,
"Name": "Vishruth",
"Age": 11
}]
how do i access the individual data from it
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

Your data is an array. You can simple use map to loop over all elements of the array and then access individual elements of the javascript object using the dot notation or the bracket notation.
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>