Mis códigos anteriores no tienen problemas para renderizar HTML. Uso solo una búsqueda (). Esta vez, cuando parece que necesito tener dos búsquedas, la primera obtendrá solo una ID de producto (procedente del carrito del usuario) que usaré para la segunda búsqueda que tomará los detalles del producto de la colección de productos.
Esas ID en la primera búsqueda están en una matriz, por eso usé map() para iterar a través de él mientras extraía los detalles del producto para cada ID de producto (hasta la segunda búsqueda).
Pensé que esto iba a funcionar, pero parece que no puedo obtener el valor de retorno para el mapa (), mi innnerHTML no genera ningún resultado.
Soy bastante nuevo en la programación, si alguien puede ayudarme, preferiría un método fácil de entender. O casi lo mismo que mi método, preferiría eso o si puede señalar lo que estoy haciendo mal o lo que me falta aquí con mi código. Porque como principiante y basado en mis proyectos anteriores, esta lógica es lo que se me ocurrió, y me gustaría hacer que esto funcione de alguna manera para ser consistente en este momento.
fetch(`${rootUrl}api/users/getCartItems`,{ method: "GET", headers:{ "Authorization": `Bearer ${token}` } }) .then(result=>result.json()) .then(result=>{ let cartItems = result.itemsArr.map(e=>{ fetch(`${rootUrl}api/products/${e.item}`,{ method: "GET" }) .then(product=> product.json()) .then(product =>{ return ` <br><br> ${e.item}<br> ${product.name}<br> ${product.description}<br> ${product.price}<br> <br><br> ` }) }).join(" ") content2 = document.querySelector('#content2'); content2.innerHTML = cartItems; })Su código es muy difícil de leer. Puede que le resulte más fácil entender las promesas usando async/await que el encadenamiento de promesas, he convertido parte de su código para usar async await, pero hay un poco más de trabajo por hacer. Async await crea efectivamente un código de bloqueo síncrono, que es el tipo de código al que podría estar más acostumbrado.
Como han dicho otros, realmente no puedes usar Javascript sin un buen conocimiento de las promesas, por lo que vale la pena invertir tiempo en esto.
const getProducts = async () => { const results = await fetch(`${rootUrl}api/users/getCartItems`, { method: 'GET', headers: { Authorization: `Bearer ${token}`, }, }) const resultsJSON = await results.json() const products = [] let counter = 0 while (counter < resultsJSON.itemsArr.length) { const fetchedProduct = await fetch( `${rootUrl}api/products/${resultsJSON.itemsArr[counter].item}`, { method: 'GET', }, ) const fetchedProductJSON = await fetchedProduct.json() products.push(fetchedProductJSON) counter++ } // Do stuff with your products array } getProducts()