reaccionarjs - Obtención de datos del archivo JSON

Estoy intentando recuperar datos de JSON externo y pude registrarlos en la consola, por lo que la recuperación funciona, pero tengo problemas para imprimir los valores.

JSON:

{
  "data": {
    "shoes": [
      {
        "types": [
          {
            "color": "pink",
           }]
       }]
}

Necesito acceder al color (rosa).

Esta es mi búsqueda:

const shoesInformations = "json.url"

const [shoesData, setShoesData] = useState([]);

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

const getShoesInfo = async () => {
    try {
        const response = await fetch(shoesInformations);
        const jsonData = await response.json();
        const { data } = jsonData;
        setShoesData(jsonData);
        console.log(data);
    } catch (err) {
        console.log(err);
    }
};

Y mi intento de imprimirlo:

<p>{shoesData.types.color}</p>

No necesito mapear los datos, solo imprima el valor uno por uno {shoesData.types.color[1]}

{shoesData.types.color} no funciona porque shoesData contiene la respuesta de recuperación completa, no la matriz de zapatos. En otras palabras, los tipos iNo está definido para ti. En setShoesData utilice datos['shoes'].

-zhulien

27/03/2021 a las 21:00

------------------------------------

El principal problema es que asignas toda la respuesta de búsqueda en lugar de solo la matriz de zapatos dentro de ella a la variable de estado ShoesData. Prueba esto:

const [shoesData, setShoesData] = useState([]);

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

const getShoesInfo = async () => {
    try {
        const response = await fetch(shoesInformations);
        const jsonData = await response.json();
        
        setShoesData(jsonData.data.shoes);
    } catch (err) {
        console.log(err);
    }
};

y luego, cuando desee presentarlo, primero agregue una marca de matriz vacía o utilice el operador de navegación segura. Hazlo (si realmente lo quieres codificado):

<p>{shoesData[0]?.types[0].color}</p>
<p>{shoesData[1]?.types[0].color}</p>

o más flexiblemente algo como:

const getShoesRepresentation = () => {
    if (shoesData.length > 0) {
        return null;
    }
    else {
        return (
            <p>{shoesData[0].types[0].color}</p>
        );
    }
};

y luego usa {getShoesRepresentation()} en tu rterminando. Esto manejará el caso de la matriz vacía y puede extenderlo para manejar la iteración sobre todos los objetos de calzado que necesite. Le sugiero encarecidamente que utilice un enfoque de iteración en lugar de codificar los datos de esa manera. Puede usarlo de forma segura proporcionando shoeIndexes que contenga solo los índices que desea presentar y luego iterarlos y crear un directorio <p> para cada uno.

1

1

Así que @zhulien finalmente lo intenté, gracias por tu paciencia. ¡La primera opción codificada funcionó para mí!Creo que todo el tiempo me perdí el? en mi objeto de búsqueda.

- Katie

30 de marzo de 2021 a las 11:21

------------------------------------

shoesData.types.color[1] no funcionará, solo tienes 1 elemento, por lo que tu índice debe ser 0:

shoesData.types.color[0]

Respondido

27 de marzo de 2021 a las 20:38

Herman Geldenhuys

Herman Geldenhuys

41

3

3 insignias de bronce

1

Tengo más de un elemento, pero no quiero mapear los elementos e imprimir los colores de todos, porque no los necesito todos; solo 10 de 25, así que quiero "codificar" ; hacerlo dándoles un número en una matriz. Pero no funciona. Recibo un error = no se puede leer el color de propiedad insuficiente

- Katie

27/03/2021 a las 20:43