How to use map on json response returned by a REST API with ReactJs

Question

I've a json. The only thing I want is title from the json.

{
  "projects": [
    {
      "id": 1,
      "title": "Bike Servicing System",
      "language": "JavaFX",
      "requires": "JDK 8"
    },
    {
      "id": 2,
      "title": "Air Traffic Controller",
      "language": "JavaFX",
      "requires": "JDK 8"
    },
    {
      "id": 3,
      "title": "Program Counter",
      "language": "JavaFX",
      "requires": "JDK 8"
    }
  ],
  "profile": {
    "name": "typicode"
  }
}

I am using fetch and componentDidMount. I want to do it musing map method to iterate through. Though I don't need <ul> and <li> tags really. I will remove them later. My React code is

import React, { Component } from "react";

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

  componentDidMount() {
    fetch("http://my-json-server.typicode.com/tmtanzeel/json-server/projects/")
      .then(res => res.json())
      .then(json => {
        this.setState({
          isLoaded: true,
          items: json.projects
        });
      });
  }

  render() {
    var { isLoaded, items } = this.state;
    var i=0;
    if (!isLoaded) return <div>Loading...</div>;
    return (
      <div>
        <ul>
        {
          items.map(item => (
            <li key={item[i++].id}>
              Projects: {item[i++].title}
            </li>
          ))
        }
        </ul>
      </div>
    );
  }
}

export default ProjectStack;

Apparently, there is something that I don't know because I am getting this error.

PS: This question is different from mine

Dez · Accepted Answer · 2019-08-16 14:26:50Z

1

The JSON of the URL you are fetching is this:

[
  {
    "id": 1,
    "title": "Bike Servicing System",
    "language": "JavaFX",
    "requires": "JDK 8"
  },
  {
    "id": 2,
    "title": "Air Traffic Controller",
    "language": "JavaFX",
    "requires": "JDK 8"
  },
  {
    "id": 3,
    "title": "Program Counter",
    "language": "JavaFX",
    "requires": "JDK 8"
  },
  {
    "id": 4,
    "title": "Dove Tail",
    "language": "JavaFX",
    "requires": "JDK 8"
  }
]

So for correctly set the data in the state you need to:

componentDidMount() {
    fetch("http://my-json-server.typicode.com/tmtanzeel/json-server/projects/")
      .then(res => res.json())
      .then(json => {
        this.setState({
          isLoaded: true,
          items: json
        });
      });
  }

Besides correcting the error they have already told you related the map loop.

answered Aug 16, 2019 at 14:26

Dez

5,8878 gold badges47 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tanzeel Over a year ago

Oh. I did not realize the square brackets in the start and end of json. Thanks. But I want to know why only items: json and not items: json.projects.

Dez Over a year ago

res.json() will retrieve the JSON provided by the URL you are fetching. The JSON provided is an array that when the promise is resolved in the then is assigned to json variable, not in json.projects as you thought.

kyun · Accepted Answer · 2019-08-16 14:35:17Z

I found 2 mistakes from your code.

The first one is you didn't check the response data.

fetch("http://my-json-server.typicode.com/tmtanzeel/json-server/projects/")
        .then(res => res.json())
        .then(json => {
          console.log(json); // it is an Array not object.
          this.setState({
            isLoaded: true,
            items: json
          });
        });

And the second is you didn't use the map() properly.

/*{
  items.map(item => (
    <li key={item[i++].id}>
      Projects: {item[i++].title}
    </li>
  ))
}*/
// items has objects, so you should use map() like this.
{
  items.map(item => (
    <li key={item.id}>
      Projects: {item.title}
    </li>
  ))
}

The below code is one way to achieve what you want.

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

    componentDidMount() {
      fetch("http://my-json-server.typicode.com/tmtanzeel/json-server/projects/")
        .then(res => res.json())
        .then(json => {
          console.log(json);
          this.setState({
            isLoaded: true,
            items: json
          });
        });
    }

    render() {
      const {
        isLoaded,
        items
      } = this.state;
      console.log(items);
      if (!isLoaded) return ( < div > Loading... < /div>);
        return ( <
          div >
          <
          ul > {
            items.map(item => ( <
              li key = {
                item.id
              } > Projects: {
                item.title
              } < /li>
            ))
          } <
          /ul> <
          /div>
        );
      }
    }
    ReactDOM.render( <
      ProjectStack / > , document.getElementById('root')
    )

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

Collectives™ on Stack Overflow

How to use map on json response returned by a REST API with ReactJs

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related