En este caso, busco datos de revisión desde dentro de un 'bucle for' como puede ver aquí:
fetch('https://api.yotpo.com/products/xx-apikey-xx/{{product.id}}/bottomline')Como no todos los productos tienen revisiones y, por lo tanto, no están disponibles, lo que da una respuesta 404 para esos productos. Esto me da muchos errores en la consola porque la identificación específica no existe (getElementById...).
<script> fetch('https://api.yotpo.com/products/xx-apikey-xx/{{product.id}}/bottomline').then(function (response) { if (response.ok) return response.json(); }).then(function (obj) { var averageScore = (obj).response.bottomline.average_score; var averageTen = averageScore * 2; var averageOverlay = 100 - averageScore * 20; var reviewCount = (obj).response.bottomline.total_reviews; var reviewCountText = "reviews"; console.log(obj); document.getElementById("jsonproductreviewcount-{{ product.id }}").innerHTML = "<span class='reviewCount d-flex'>" + reviewCount + " " + reviewCountText + "</span>"; document.getElementById("sterrenOverlay-{{ product.id }}").style.width = averageOverlay + "%"; }).catch(function (error) { console.error('Oops! Errrrrorrr...'); console.error(error); }) </script>¿Debo usar alguna instrucción IF/ELSE para verificar si el productid/respuesta da un código 200? ¿Pero cómo?
Aunque las personas que crearon fetch aparentemente no están de acuerdo, en mi opinión, una respuesta fallida es un error, por lo que siempre lo trato como tal; ver *** :
fetch('https://api.yotpo.com/products/xx-apikey-xx/{{product.id}}/bottomline') .then(function (response) { if (!response.ok) { // *** throw new Error(`HTTP error ${response.status}`); // *** } // *** return response.json(); }) .then(function (obj) { var averageScore = (obj).response.bottomline.average_score; var averageTen = averageScore * 2; var averageOverlay = 100 - averageScore * 20; var reviewCount = (obj).response.bottomline.total_reviews; var reviewCountText = "reviews"; console.log(obj); document.getElementById("jsonproductreviewcount-{{ product.id }}").innerHTML = "<span class='reviewCount d-flex'>" + reviewCount + " " + reviewCountText + "</span>"; document.getElementById("sterrenOverlay-{{ product.id }}").style.width = averageOverlay + "%"; }) .catch(function (error) { console.error('Oops! Errrrrorrr...'); console.error(error); }); Eso transferirá el control de su primera then devolución de llamada a su devolución de llamada de catch .
Un par de notas al margen:
(obj).xyz , solo use obj.xyz .var está efectivamente en desuso; el nuevo código debe escribirse con let y/o const .async / await en lugar de funciones de devolución de llamada de promesa explícita.Por lo que vale:
fetch("https://api.yotpo.com/products/xx-apikey-xx/{{product.id}}/bottomline") .then((response) => { if (!response.ok) { // *** throw new Error(`HTTP error ${response.status}`); // *** } // *** return response.json(); }) .then((obj) => { const { average_score, total_reviews } = obj.response.bottomline; const averageTen = average_score * 2; const averageOverlay = 100 - average_score * 20; const reviewCountText = "reviews"; console.log(obj); document.getElementById("jsonproductreviewcount-{{ product.id }}").innerHTML = `<span class="reviewCount d-flex">${total_reviews} ${reviewCountText}</span>`; document.getElementById("sterrenOverlay-{{ product.id }}").style.width = averageOverlay + "%"; }) .catch((error) => { console.error("Oops! Errrrrorrr..."); console.error(error); });