如何删除额外的空JSON数据div

Question

我使用JSON数组数据在JavaScript页面上使用JavaScript和＆amp ;;显示内容。 jQuery但它导致了一些空的内容，我不认为我将它添加到我的代码中，我不知道如何删除它。有人知道这里有什么问题吗？所有建议都非常感谢！

HTML：

<div id="header">
  <img src="images/cn-header.jpg" alt="logo" />
</div>

<div id="container">
  <div class="article">
    <div class="title-home"></div>
    <div class="cover-home"></div>
  </div>
</div>

JavaScript的：

$(document).ready(function() {
  $.getJSON("article.json", function(data){
    console.log(data) //just to log in console as well
    var article_data = '';
    $.each(data, function(key, value){
      article_data += '<div class="article">';
      article_data += '<div class="title-home">' + value.title + '</div>';
      article_data += '<div class="cover-home"> <img src="' + value.cover + '"> </div>';
      article_data += '</div>';
    });
    $('#container').append(article_data);
  });
});

CSS：

#container {
  width: 100%;
}
.article {
  padding: 50px;
  display: inline-block;
  width: 25%;
  /*border: 1px solid red;*/
}
.title-home {
  margin-bottom: 10px;
  text-align: center;
  font-weight: bold !important;
  font-size: 16px;
}
.cover-home {
  border: 5px solid green;
}
.cover-home img {
  border: 1px solid blue;
  max-width: 100%;
}

Answer 1

删除容器div的内容：

<div id="header"> 
  <img src="images/cn-header.jpg" alt="logo" />
</div>

<!-- #containet div now empty -->
<div id="container"></div>

Answer 2

使用和if statement在JavaScript中有条件地运行一系列命令。

$.each(data, function(key, value){
  if (value.title != '') {
    article_data += '<div class="article">';
    article_data += '<div class="title-home">' + value.title + '</div>';
    article_data += '<div class="cover-home"> <img src="' + value.cover + '"> </div>';
    article_data += '</div>';
  }
});

根据您对数据的预期情况调整条件。

如果您是从服务器获取数据，请使用console.log或检查浏览器的“投放网络”标签查看数据的实际内容。

Answer 3

KIndly检查两个参数是否都有一些响应值。

$.each(data, function(key, value){
    var isTrue = value.title!='' && value.cover!='';
      if (isTrue ) {
        article_data += '<div class="article">';
        article_data += '<div class="title-home">' + value.title + '</div>';
        article_data += '<div class="cover-home"> <img src="' + value.cover + '"> </div>';
        article_data += '</div>';
      }
    });