0

Hola tengo un problema al tratar de rertornar y guardar la data de una api, lo hago de la siguiente manera:

  const items = []

  const PATH_PRODUCT_ID = `/api/items`
  fetch(PATH_PRODUCT_ID, { credentials: 'omit' })
    .then((response) => response.json())
    .then((products) => {
      products.forEach((product) => {
        items.push(product)
      })
    })
    .catch((err) => console.error('customData', err))

al hacer un console.log al array que les estoy pasando los items, me imprime el array con los objetos

  console.log('Alert Items -> ', items)

Pero si quiero iterar sobre ellos con un .forEach() o un for corriente no puedo hacerlo, ademas al hacerle un console.log() a la longitud del array me imprime 0.

  console.log('lenght of items -> ', items.length)

En la consola:

lenght of items ->  0

Que puedo estar haciendo mal? Gracias.

6
  • cual es la salida de esto? console.log('Alert Items -> ', items)
    – Pipe
    Commented el 29 ago. 2022 a las 22:12
  • De dónde salió suggestedProducts? No veo que le estés asignando nada a ese supuesto arreglo.
    – Arriel
    Commented el 29 ago. 2022 a las 22:12
  • 2
    Además... recuerda que fetch es asincrono... será que no estás esperando que el fetch termine de hacer su tarea y estaras intentando usar items por fuera antes de que fetch termine?
    – Pipe
    Commented el 29 ago. 2022 a las 22:13
  • perdon, fue un error, suggestedProducts, es en realidad el arreglo items que esta declarado, y se que fetch es asincrono pero tambien intente creando una funcion asincrona que devuelva la data, pero al asignarselo a una variable, esta me imprime una promesa, y si le coloco await antes de llamar a la funcion, me da un error de compilacion.
    – kilex
    Commented el 31 ago. 2022 a las 2:14
  • En principio lo que desees hacer con items deberías hacerlo dentro del 2do then, es la forma que tienes de asegurarte de que la repuesta está, incluso podrías eliminar el array y utilizar directamente la response. Otra opción es pasar la llamada a async y await y luego de recibir la respuesta hacer lo que desees. Commented el 31 ago. 2022 a las 4:16

1 respuesta 1

1

El problema es que estás intentando recorrer un objeto, el cual no es iterable, por lo tanto no estás insertando nada en items.

Para poder recorrer un objeto, primero tienes que convertirlo en un array, para ello tendrás que hacer uso de uno de los siguientes métodos de Object:

  • Object.keys: Devuelve un iterable con las claves del objeto.
  • Object.values: Devuelve un iterable con los valores (sin la clave).
  • Object.entries: Devuelve un iterable de conjuntos de clave y valor.

Sabiendo esto, vamos a añadir los datos de la respuesta al array items:

Deduzco que no te interesa almacenar las claves, por lo tanto lo conveniente es usar Object.values

const PATH_PRODUCT_ID = `/api/items`
 
// Solicita los datos a la API.
fetch(PATH_PRODUCT_ID, { credentials: 'omit' })
    // Resuelve la solicitud y parsea la respuesta en JSON.
    .then((response) => response.json())
    
    // Resuelve la promesa del parseo de la respuesta.
    .then((products) => {
        
        // Pasa a iterable y recorre.
        Object.values(products).forEach(product => {

            // Inserta el producto de la iteración.
            items.push(product);

        });

        // Resto del código...
        // Recuerda que fetch es asíncrono.

    })
    // Manejo de errores.
    .catch((err) => console.error('customData', err))

Pero como recorrer la salida para volver a insertar los datos en un array no es óptimo, podrías declarar items como variable en vez de constante y asignar la salida de Object.values:

let items;

...

    // Resuelve la promesa del parseo de la respuesta.
    .then((products) => {
    
        // Pasa a iterable y recorre.
        items = Object.values(products);

        // Resto del código...
        // Recuerda que fetch es asíncrono.

    })

Échale un ojo a este snippet:

// Ignorar esta función.
const fetchAPI = () => {

    return new Promise((resolve, reject) => {
  
    setTimeout(() => {
        resolve({
        product1: {
            name: 'product1',
          price: '12,99',
          description: '...'
        },
        product2: {
            name: 'product2',
          price: '25,99',
          description: '...'
        },
        product3: {
            name: 'product3',
          price: '50,99',
          description: '...'
        },
      })
    }, 800)
  
  })

}

// Empezar a leer por aquí.
const items = [];

// Simula la petición a la API.
fetchAPI()
//.then(response => response.json())
.then(products => {

    // Pasa a iterable el resultado de la petición.
    Object.values(products).forEach(product => {
    
    // Asigna el producto al array items.
    items.push(product);
    
  });
  
  // Muestra la cantidad de índices en el array items.
  console.log(`length of items -> ${items.length}`);

})

También te recomiendo que revises la documentación de MDN:

Tu Respuesta

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

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