空のJSONデータの余分なdivを削除するには

Question

JavaScriptを使用してHTMLページのコンテンツを表示するにはJSON配列データを使用しています。& jQueryが空のコンテンツのdivになります。私のコードと私はそれを削除する方法を知らない。誰がここで間違っていることを認識していますか？すべての提案は非常に高く評価されています！

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

使用してif statement条件付きでブロックを実行するために、 JavaScriptのコマンドのk。

$.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 2

あなたのコンテナのdivの内容を削除します。両方のパラメータが応答で何らかの値を持っている場合は

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

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

Answer 3

は親切に確認してください。

$.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>'; 
     } 
    });