Having problems parsing json complex data in react js. Map error

Question

App.js I am facing this issue file error - Uncaught TypeError: items.data.map is not a function. I have tried some other options but did not work. I cant seem to find what I am doing wrong.

      .then((res) => res.json())
      .then((json) => {
        this.setState({
          items: json,
          DataisLoaded: true
        });
      })
  }
  render() {
    const { DataisLoaded, items } = this.state;
    if (!DataisLoaded) return <div>
      <h1> Loading data ... </h1> </div> ;

    return (
    <div className = "App">
      <h1> Fetch data from an api in react </h1> {
        items.data.map((item) => (
        <ol key = { item.data} >
          Continents: {item.data[0]}
          </ol>
        ))
      }
    </div>
  );
}
}    
export default App;

JSON Data

Nested API data from json data type.

 {
  "data": {
    "data": [
      {
        "project_id": "xxxx",
        "title": "xxx34",
        "description": "xxx23",
        "expense": 1699126,
        "budget": 6418516,
        "country": "xxx",
        "sector": [
          {
            "name": "Accelerate structural transformations",
            "code": "18"
          }
        ],
        "sdg": [
          {
            "name": "Peace, justice, and strong institutions",
            "id": "16"
          }
        ],
        "signature_solution": [
          {
            "name": "Strengthen effective, inclusive and accountable governance",
            "id": "2"
          }
        ],
        "donor": [
          "Australian DFAT",
          "GLOBAL FUND TO FIGHT AIDS, TUBERCULOSIS",
          "UNITED NATIONS DEVELOPMENT PRO"
        ],
        "marker": [
          "Hows",
          "Joint Programme",
          "Partner",
          "Whos",
          "COVID-19 Response"
        ]
      },
      {
    ],
    "links": {
      "next": null,
      "previous": null
    },
    "count": 44
  },
  "status": 200,
  "success": true
}

I tried data.data.map but still facing the same error. What am I doing wrong here?

Answer 1

Firstly, the TypeError you got is syntax error. The implementation of an arrow function must follow by curly brackets

items.data.map((item) => (
    <ol key = { item.data} >
        Continents: {item.data[0]}
    </ol>
))

to

items.data.map((item) => {
    <ol key = { item.data} >
        Continents: {item.data[0]}
    </ol>
})

Secondly, items you are mapping is a nest of JSON object - key: value pair. It's not suitable for mapping.

The mapping iterator or iterating an array is perfect when used to retrieve data from a sequence item have the same or similar structure.

Eg:

const arr = [{"id": "1", "name": "a"}, {"id": "2", "name": "b"}, {"id": "3", "name": "c"}];
arr.map((item) => {
    console.log(item.id);
    console.log(item.name);
})

You should pretreat your data first.