Necesito mostrar productos en varias categorías en el sitio web de mi empresa, pero a veces un valor será nulo. Me gustaría mostrar nada para esas situaciones, pero no tengo idea de cómo hacerlo.
Cualquier ayuda sería apreciada.
No puedo compartir el punto final, aceptar o autorizar, por lo tanto, el extraño texto "va aquí" en el código:
var settings = {
"url": " 'API endpoint goes here' ",
"method": "GET",
"timeout": 0,
"headers": {
"accept": " 'JSON goes here' ",
"Authorization": " 'authorization key goes here' "
},
};
$.ajax(settings).done(function(response) {
console.log(response);
$.each(response.data, function(index, value) {
console.log(value);
var name = value.name;
var productNumber = value.productNumber;
var size = value.size;
var photo = value.primaryPhoto.standard;
var id = value.id;
$('.output').append('<div class="single-product"><div class="photo"><img src="' + photo + '" alt="product bag"/></div><h5 class="name">' + name + '</h5><p class="productNumber">' + productNumber + '</p><p class="size">' + size + '</p><a href="https://productpage.co/product-single/?id=' + id + '"><div class="button" style="text-align: center; font-weight: bold; color: white;">LEARN MORE</div></a></div>');
})
});
puede usar return para saltar a la siguiente iteración cuando el value es nulo o si desea romper completamente el ciclo, puede usar return false;
$.each(response.data, function(index, value) {
console.log(value);
//skip to next iteration/product when there's no data in value
if (value == null) {
return;
}
var name = value.name;
var productNumber = value.productNumber;
var size = value.size;
var photo = value.primaryPhoto.standard;
var id = value.id;
$('.output').append('<div class="single-product"><div class="photo"><img src="' + photo + '" alt="product bag"/></div><h5 class="name">' + name + '</h5><p class="productNumber">' + productNumber + '</p><p class="size">' + size + '</p><a href="https://backyardboost.co/product-single/?id=' + id + '"><div class="button" style="text-align: center; font-weight: bold; color: white;">LEARN MORE</div></a></div>');
})