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:
console.log('Alert Items -> ', items)
suggestedProducts
? No veo que le estés asignando nada a ese supuesto arreglo.fetch
es asincrono... será que no estás esperando que elfetch
termine de hacer su tarea y estaras intentando usaritems
por fuera antes de que fetch termine?