如何正确忽略JSON文件null值 修复Owl Carousel图片加载异常

问题现象 #

通过fetch拉取JSON文件渲染网页数据时，循环为每个数据对象创建独立div的逻辑运行正常，但向Owl Carousel轮播组件加载图片时出现异常：已添加null值过滤逻辑的前提下，若当前数据对象存在值为null的图片地址字段，会错误将后续对象的非null图片追加到当前轮播中，出现图片加载错位。

问题原因 #

出现错位的核心原因有两个：

1. 追加图片时使用的$('.owl-carousel')是全局选择器，会匹配页面上所有已生成的owl-carousel轮播元素，并非当前循环步骤中新创建的对应轮播容器，随着循环推进，后续的图片会被追加到所有已存在的轮播中
2. 原代码存在两处细节问题：重复将同一个div两次追加到主容器、img标签缺失闭合尖括号，会进一步导致DOM结构混乱

修复代码 #

fetch('LINK TO JSON FILE')
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    appendData(data);
    // 所有DOM渲染完成后再初始化轮播，避免动态内容无法被识别
    $('.owl-carousel').owlCarousel({
      // 此处填写你自定义的轮播配置参数即可
    });
  })
  .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");
    // 为当前数据项创建专属轮播容器
    var carouselEl = document.createElement("div");
    carouselEl.className = "owl-carousel";
    div.appendChild(carouselEl);
    // 缓存当前轮播的引用，后续仅操作当前容器
    var $currentCarousel = $(carouselEl);

    // 仅追加非null的图片到当前轮播
    if (data[i].image1Url != null) {
      $currentCarousel.append('<div class="item"><img src="' + data[i].image1Url + '"></div>');
    }
    if (data[i].image2Url != null) {
      $currentCarousel.append('<div class="item"><img src="' + data[i].image2Url + '"></div>');
    }
    if (data[i].image3Url != null) {
      $currentCarousel.append('<div class="item"><img src="' + data[i].image3Url + '"></div>');
    }
    if (data[i].image4Url != null) {
      $currentCarousel.append('<div class="item"><img src="' + data[i].image4Url + '"></div>');
    }

    mainContainer.appendChild(div);
  }
}

修复点说明 #

• 每次循环生成轮播容器后，单独缓存当前容器的引用，追加图片时仅操作当前轮播，不会污染其他轮播的内容
• 移除重复的DOM插入逻辑，修正img标签的语法错误，保证DOM结构正确
• 调整Owl Carousel初始化时机，等所有动态内容渲染完成后再执行初始化，避免轮播功能失效
• 保留原有的null值判断逻辑，自动跳过空地址的图片字段

内容的提问来源于stack exchange，提问作者user1612249