Rendering JSON API in react Using map method
34,601
Solution 1
Previous answer is almost correct, fixing the fetch correctly will solve the problem.
componentDidMount() {
var url = "https://demo8192935.mockable.io/mockApi";
fetch(url)
.then(response => {
return response.json();
})
.then(d => {
this.setState({ clouds: d });
console.log("state", this.state.clouds)
})
.catch(error => console.log(error))
}
render() {
return (
<div>
{
this.state.clouds.map(((cloud, index) =>
<th key={`${cloud.cloud}${index}`}>
<div>
<div>
{cloud.cloud}
<div>
{
cloud.data_centers.map(d => (
<div>
{d.title}
</div>
))
}
</div>
</div>
</div>
</th>
))
}
</div>
);
}
Solution 2
There is no need to return a html
element inside componentDidMount
.
Try this:
constructor(props) {
super(props)
this.state = {
clouds: []
}
}
componentDidMount() {
var url = "http://trust.zscaler.com.test/sample-api/third-party-monitoring/availability.json";
fetch(url)
.then(response => {
this.setState({ clouds : response })
}).catch(error => {
console.log(error)
})
}
render() {
if (this.state.clouds && this.state.clouds.length > 0) {
return (
<div>
{
this.state.clouds.map((items =>
<th key="">
{items.cloud}
</th>
))
}
</div>
);
}
return null;
}
Hope this helps you.
Author by
Bhawna
I'm very opinionated, very intelligent and not afraid to show that.
Updated on January 15, 2020Comments
-
Bhawna over 4 years
I am having difficulty with the syntax and the structure of JSON objects/arrays and map method. I am new to React and on an initial stage of learning.
This is the JSON file code I pasted below:
[ { "cloud":"Asia", "availability":{ "last15Min":"100%", "last24Hour":"100%" }, "data_centers":[ { "title":"Bombay", "availability":{ "last15Min":"100%", "last24Hour":"100%" } }, { "title":"Bombay1", "availability":{ "last15Min":"100%", "last24Hour":"100%" } } ] }, { "cloud":"Europe", "availability":{ "last15Min":"100%", "last24Hour":"100%" }, "data_centers":[ { "title": "Bombay", "availability": { "last15Min": "100%", "last24Hour": "100%" } }, { "title":"Bombay1", "availability":{ "last15Min":"100%", "last24Hour":"100%" } } ] } ]
Here is my code so far: I want to render each field using map method. What is the correct method to do that?
In componentDidMount I am getting the response in console.log http://prntscr.com/i09rqt
constructor(props) { super(props) this.state = { clouds:[] } } componentDidMount() { var url="<api url>"; fetch(url) .then(response => { return response.json(); }).then(d => { let clouds = d.map((cloudData)=>{ return( <div>{cloudData}</div> ) }) this.setState({clouds: clouds}); console.log("state", this.state.clouds) }) } render() { return ( <div> { this.state.clouds.map((cloud => <th key=""> {cloud} </th> )) } </div> ); }
-
Bhawna over 6 yearsI am getting this Typeerror this.state.clouds.map is not a function
-
Syed over 6 yearsi have update the code by adding
if
statement inside render function. please take latest code and check again. -
Bhawna over 6 yearsThank you for the answer but i want to print "data_centers" also. How can I use map inside map method
-
Bhawna over 6 yearsThank you for the answer but i want to print "data_centers" also. How can I use map inside map method –
-
Swapnil over 6 years@Bhawna, I have modified the code to show how it's done. It just an example for you to show how to nest the maps. I will recommend you to separate out the components as per your need for better code readability. I guess adding anything else to this answer is out of scope of your question. Hope this solves all your problems.