I need to display products in various categories on my company's website, but sometimes a value will be null. I would like to display nothing for those situations but I have no idea how to go about doing that.
Any help would be appreciated.
I can't share the endpoint, accept, or authorization, thus the strange "goes here" text in the code:
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>');
})
});
you can use return to skip to next iteration when value is null or if you wanted to break completely the loop you can use 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>');
})