Mapping through JSON data that contain additional status and results from messages-CodePudding

I'm trying to map through JSON data from React with this code...

import {useEffect,useState} from 'react'


function Tourapi() {

    const[tours,settour]=useState([])
    const[loading,setloading]=useState(true)

    useEffect(()=>{
        fetchtour()

    },[])

    const fetchtour= async()=> {
        const furl='https://www.natours.dev/api/v1/tours'
        const res = await fetch(furl)
        const data = await res.json()
      settour(data)
      setloading(false)
    }

  if(!loading)
  {
    return (
        <div>
         {tours.map((tour)=>(

<h3> {tour.name}</h3>
         ))}   
        </div>
    )
  }
  else
  {
      return <h3>LOADING.....</h3>
  }

  
}

export default Tourapi

but it looks like that JSON data contain additional things and the data array so how can I Map through to get the name and description and so on...

the error that I got TypeError: tours.map is not a function

the JSON data begin with

{"status":"success","results":10,"data":{"data":[{"startLocation":{"type":"Point","coordinates":[-80.185942,25.774772],"description":"Miami, USA","address":"301 Biscayne Blvd, Miami, FL 33132, USA"}

what I mean how can I get out of ("status":"success","results":10,"data":) and get the data its self because it's not my API to control with the response

thanks.

CodePudding user response：

This is what you need, I hope it's help

import { useState, useEffect } from "react";
function TourAPI() {
  const [tours, settour] = useState([]);
  const [loading, setloading] = useState(true);

  useEffect(() => {
    fetchtour();
  }, []);

  const fetchtour = async () => {
    const furl = "https://www.natours.dev/api/v1/tours";
    const res = await fetch(furl);
    const data = await res.json();
    await settour(data.data.data);
    setloading(false);
  };

  if (!loading) {
    return (
      <>
        <div className="tour-section">
          {tours.map((tours, i) => {
            return <h3 key={i}>{tours.name}</h3>;
          })}
        </div>
      </>
    );
  } else {
    return <h3>LOADING.....</h3>;
  }
}
export default TourAPI;

I'll walk you through what's in the data, if you console.log(data) in your fetchtour, it'll contain an object that contains properties. It's like this

{status: 'success', results: 10, data: {data}}

So, you want to access one more data inside of that data That'll lead to console.log(data.data) to see what's in there.

And it'll appear like this.

{data: Array(10)}

So, the data key actually contains the data's array inside of it, the data.data contains an array with 10 indexes in it as you can see. You can try in your browser to see that as well, and each index will contain the properties you want in there, which is name, and many more properties that you need to get like location, etc.

So lead us to the last data, if you console.log(data.data.data), it'll access to data that contains the 10 indexes, which it'll be an array [...] so that we can use map.

That's what you need to setState for the tours

And from that, we're good to use map, because we actually are able to map through an array that contains indexes. And don't forget to set key for each div inside the map or you'll get the warning fire out from the console in your browser.

My English is not too well so my explanation might be a little bit hard but I hope you can understand what's going on.