CODEWITHSUNDEEP
javascriptjsonreactjsapi
testprogrammer
testprogrammer

Reputation: 15

JSON api data not loading in React

So I'm fairly new to using React and I've been given an assignment to fetch data from a JSON API and display it on the screen. While practicing fetching data for https://jsonplaceholder.typicode.com/users everything was working correctly and I was getting no errors. Once I tried to get data from this api https://www.hatchways.io/api/assessment/students.

I got this massive error in my console (I did cut some of the eror message out because it was really huge).

Uncaught TypeError: items.map is not a function

at App.render (App.js:34)
at finishClassComponent (react-dom.development.js:15141)
at updateClassComponent (react-dom.development.js:15096)
at beginWork (react-dom.development.js:15980)
at performUnitOfWork (react-dom.development.js:19102)
at workLoop (react-dom.development.js:19143)
at HTMLUnknownElement.callCallback (react-dom.development.js:147)
at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
at invokeGuardedCallback (react-dom.development.js:250)
at replayUnitOfWork (react-dom.development.js:18350)
at renderRoot (react-dom.development.js:19261)
at performWorkOnRoot (react-dom.development.js:20165)
at performWork (react-dom.development.js:20075)
at performSyncWork (react-dom.development.js:20049)
at requestWork (react-dom.development.js:19904)
at scheduleWork (react-dom.development.js:19711)
at Object.enqueueSetState (react-dom.development.js:12936)
at

App.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:356) at App.js:16

So my question is how come I could get the data from one api but not the other? Is there something wrong with the other api or am I doing something incorrectly? I will post my code below.

import React, {Component} from 'react';

class App extends Component{
    constructor(props){
        super(props);
        this.state = {
            items:[],
            isLoaded: false
        };
    }

  componentDidMount(){
      fetch('https://www.hatchways.io/api/assessment/students')
          .then(res=> res.json())
          .then(json =>{
              this.setState({
                  isLoaded: true,
                  items: json,
              })
          });
  }


  render(){
      const {isLoaded, items} = this.state;
      if(!isLoaded){
          return <div>loading data...</div>;
      }

      else{           

          return(
              <div className="Data">
                  <ul>
                      {items.map(item=>(
                          <li key={item.students}>
                              name:{item.name}
                          </li>
                      ))};
                  </ul>                   
              </div>

          );
       }

  }

}

export default App;

Upvotes: 0

Views: 1307

Answers (1)

quadreex
quadreex

Reputation: 146

Looks like https://www.hatchways.io/api/assessment/students API returns an object with students property.

So your items is an object, and not an array, that is why it does not have map function.

To fix the problem your fetch logic can look like this:

componentDidMount(){
      fetch('https://www.hatchways.io/api/assessment/students')
          .then(res=> res.json())
          .then(({ students }) => {
              this.setState({
                  isLoaded: true,
                  items: students,
              })
          });
  }

Upvotes: 3

Related Questions