Necesito hacer una lista de objetos basada en datos combinados de 2 matrices, una proviene de localStorage y la segunda de Django backend. En primer lugar, todos los objetos de localStorage se muestran mediante la función showCart()
export const showCart = () => { if (typeof window !== undefined) { if (localStorage.getItem("cart")) { return JSON.parse(localStorage.getItem("cart")); }; }; }; devuelve datos en este formato: FE: { id: 1, amount: 7, size: "L", product: 1 } . product es la clave externa necesaria para hacer coincidir los datos de otra matriz.
La segunda matriz proviene de un backend y se obtiene mediante la función getAllProducts()
export const getAllProducts = () => { return fetch(`${url}/products/`, {method: "GET"}) .then((response) => { return response.json(); }) .catch((error) => console.log(error)) }; Devuelve datos en este formato: FE { name: "Red", id: 3, price: 33, image:"some-url"}
Ahora necesito crear otra lista de objetos fusionando luego por product de un objeto en la primera matriz con la id de un objeto de la segunda. Los objetos de la tercera matriz deben contener la amount y el size de la primera matriz, así como el name , price y la image de la segunda. Al final, quiero almacenarlo en useState() .
Esto es lo que se me ocurrió, supongo que mi código deja de funcionar primero después del ciclo for:
const [cart, setCart] = useState([]); const CheckAnonymousCart = () => { getAllProducts() .then((data) => { const localCart = showCart(); var products = []; for (let i = 0; i < localCart.lenght; i++) { for (let y = 0; y < data.lenght; y++) { if (localCart[i].product === data[y].id) { console.log(localCart[i].product, data[y].id) const item = { name: data[y].name, price: data[y].price, image: data[y].image, amount: localCart[i].amount, size: localCart[i].size, } products.push(item) break; } } } setCart(products); }) .catch((error) => console.log(error)) };¿Alguna idea?
Además del comentario de Jacob, probablemente desee evitar FETCH 'ing todos los productos de la base de datos, porque requiere más recursos de la base de datos, la mayor parte de la información no es necesaria y hace que el bucle for tarde más en JOIN a ambas listas.
Idealmente, usaría una consulta parametrizada como esta:
return fetch(`${url}/products/?id=1&id=2&id=3`, {method: "GET"}) Donde ?id=1&id=2&id=3 son un subconjunto de los ID de producto que está recuperando.
Nota: También querrá desinfectar/validar los ID de producto en localStorage , ya que el usuario final puede modificar los datos, lo que es un vector de ataque potencial por parte de usuarios malintencionados.
El problema podría ser simplemente el error tipográfico de las condiciones del bucle for, pero también puede lograr esto de manera más sucinta utilizando los métodos JS ES6:
const products = localCart.map(item => { const match = data.find(x => x.id === item.product); return { amount, size, name: match?.name, price: match?.price, image: match?.image } });