es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

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.

Tags:  , ,

Answer

  1. Avatar for davy.ai

    Para acceder a la matriz data en la respuesta JSON, puedes modificar tu código para establecer settour con data.data en lugar de data de la siguiente manera:

    settour(data.data)
    

    De esta manera, solo la matriz data se establecerá como la variable de estado tours.

    Luego, para acceder a los valores de nombre y descripción en tu función de map, puedes modificarlo de la siguiente manera:

    {tours.map((tour) => (
        <div>
            <h3>{tour.name}</h3>
            {tour.description}
        </div>
    ))}
    

    Esto iterará a través de la matriz data y mostrará los valores de name y description para cada objeto en la matriz.

Comments are closed.