How to ignore null values from JSON file correctly-CodePudding

I am fetching a JSON file, and adding the data onto my webpage. I am looping through and creating a new div for each object and it is working except for where I am trying to load in the images into owl carousel. I need to ignore the image = null. It is now looping through and adding the images from the NEXT object if not null...

fetch(‘LINK TO JSON FILE’)
            .then(function (response) {
                return response.json();
            })
            .then(function (data) {
                appendData(data);
            })
            .catch(function (err) {
                console.log('error: '   err);
            });
function appendData(data) {
            var mainContainer = document.getElementById("data");
            for (var i = 0; i < data.length; i  ) {
                var div = document.createElement("div");
                div.innerHTML  = '<div ></div>'
                    ;
                mainContainer.appendChild(div); 
                // images
                if (data[i].image1Url != null){
                        $('.owl-carousel').append('<div ><img src="'   data[i].image1Url   '"</div>');
                }
                if (data[i].image2Url != null){
                        $('.owl-carousel').append('<div ><img src="'   data[i].image2Url   '"</div>');
                }
                if (data[i].image3Url != null){
                        $('.owl-carousel').append('<div ><img src="'   data[i].image3Url   '"</div>');
                }
                if (data[i].image4Url != null){
                        $('.owl-carousel').append('<div ><img src="'   data[i].image4Url   '"</div>');
                }
    mainContainer.appendChild(div); 
    }

CodePudding user response：

The problem is that you append to your "global" selector $('.owl-carousel'). Every time, you want to append to a specific carousel, you append to each of them.

Make them unique for each loop run.

Example:

Add a class, including your autoincrementer i and only append to this one.

div.innerHTML  = '<div ></div>';

if (data[i].image4Url != null){
  $('.carousel_' i).append('<div ><img src="'   data[i].image4Url   '"</div>');
}

function appendData(data) {
   var mainContainer = document.getElementById("data");
   for (var i = 0; i < data.length; i  ) {
    var div = document.createElement("div");
    div.innerHTML  = '<div ></div>';    
    mainContainer.appendChild(div); 
    
    // images
    if (data[i].image1Url != null){
      $('.carousel_' i).append('<div ><img src="'   data[i].image1Url   '"</div>');
    }
    if (data[i].image2Url != null){
      $('.carousel_' i).append('<div ><img src="'   data[i].image2Url   '"</div>');
    }
    if (data[i].image3Url != null){
      $('.carousel_' i).append('<div ><img src="'   data[i].image3Url   '"</div>');
    }
    if (data[i].image4Url != null){
      $('.carousel_' i).append('<div ><img src="'   data[i].image4Url   '"</div>');
    }
    
    mainContainer.appendChild(div); 
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>