0

tengo una api que me devuelve dentro de "data" una serie de objetos, tal como muestro en la captura

introducir la descripción de la imagen aquí

Yo tengo este código con React (disculpar estoy empezando) y no veo como recorrer dentro de data los elementos.

    import React, { Component } from "react";

export default class ListItems extends Component {

    constructor(props) {
        super(props);
        this.state = {
            items : [],
            isLoaded: false,
        }
    }

    componentDidMount() {
        fetch('http://api-diets.local/api/diets/user/2')
            .then(res => res.json())
            .then(json => {

                this.setState({
                    isLoaded:true,
                    items: json,
                })

            });

    }

    render() {

        var {isLoaded, items} = this.state;

        if (!isLoaded) {
            return <div>Loading...</div>;
        }
        else {

            return (

                // <h3>Listado items</h3>

                <div className="App">
                    <ul>
                        {items.map(item => (
                            <li key={item.id}>
                                Name : {item.name}
                            </li>
                            ))};
                    </ul>

                </div>
            );
        }
    }
}

Si hago un console.log de response.data, lo que veo es lo siguiente pero no veo los datos que muestro en la captura primera de "id,name,..."

introducir la descripción de la imagen aquí

2 respuestas 2

2

Lo que necesitas es asignar el arreglo de items que se encuentra en la respuesta y no toda la respuesta. Recuerda que el API responde con un objeto de la siguiente estructura:

  { 
    data: [...]
  }

Por lo tanto en componentDidMount cuando haces el setState necesitas hacerlo de la siguiente manera:

this.setState({
   isLoaded:true,
   items: json.data,
})
2
  • Muchas gracias, con tu ejemplo lo ví. Muchas gracias
    – ilernet
    el 4 feb. 2020 a las 10:58
  • Facepalm para mi, excelente visión colega :) el 4 feb. 2020 a las 11:57
1

Me parece extraño que te complique, porque de hecho lo estas haciendo en el render.

Sólo debes aplicar un map para añadir los objetos como quieras

componentDidMount() {
   fetch('http://api-diets.local/api/diets/user/2')
      .then(res => res.json())
      .then(json => {
         const aux = json.map(x => { return x.name })

         this.setState({
            isLoaded:true,
            items: aux
         })
      });
}

Nos comentas si te sirve :)

1
  • Me da fallo ese código, la estructura que devuelve el json es { data } y dentro de "data" estan los objetos. El error que me da es este : × Unhandled Rejection (TypeError): json.map is not a function
    – ilernet
    el 4 feb. 2020 a las 8:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.