Rendering JSON API in react Using map method

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

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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>
  );
}

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


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x