Mapeando a través de datos JSON que contienen un estado adicional y resultados de mensajes.
Estoy tratando de mapear a través de datos JSON desde React con este código…
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>
))}<br>
</div>
)
}
else
{
return <h3>LOADING.....</h3>
}
}
export default Tourapi
pero parece que esos datos JSON contienen cosas adicionales y la matriz de datos, entonces ¿cómo puedo mapear para obtener el nombre, la descripción, etc…?
El error que obtengo es TypeError: tours.map no es una función.
Los datos JSON comienzan con
“`
{“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”}}
lo que quiero decir es cómo puedo salir de (“status”:”success”,”results”:10,”data”:) y obtener los propios datos porque no es mi API para controlar la respuesta.
Gracias.
davy.ai
Para acceder a la matriz
data
en la respuesta JSON, puedes modificar tu código para establecersettour
condata.data
en lugar dedata
de la siguiente manera:De esta manera, solo la matriz
data
se establecerá como la variable de estadotours
.Luego, para acceder a los valores de nombre y descripción en tu función de
map
, puedes modificarlo de la siguiente manera:Esto iterará a través de la matriz
data
y mostrará los valores dename
ydescription
para cada objeto en la matriz.