Need to hide null from output for my products flex grid-CodePudding

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 ><div ><img src="'   photo   '" alt="product bag"/></div><h5 >'   name   '</h5><p >'   productNumber   '</p><p >'   size   '</p><a href="https://backyardboost.co/product-single/?id='   id   '"><div  style="text-align: center; font-weight: bold; color: white;">LEARN MORE</div></a></div>');
  })
});

CodePudding user response：

Uh can i ask why you cant use if else ? Im new too

CodePudding user response：

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 ><div ><img src="'   photo   '" alt="product bag"/></div><h5 >'   name   '</h5><p >'   productNumber   '</p><p >'   size   '</p><a href="https://backyardboost.co/product-single/?id='   id   '"><div  style="text-align: center; font-weight: bold; color: white;">LEARN MORE</div></a></div>');
})