DIVがすべてのJSON取得データを表示しない

Question

なぜこのコードはすべてのデータを表示しないのですか？それはディスプレイを切る。

<script type="text/javascript"> 
    $(document).ready(function() { 
     var url = "http://xxxxxxx/integration/json_news.php"; 
     $.getJSON(url, function(result) { 
      console.log(result); 
      $.each(result, function(i, field) { 
       var source = field.source; 
       var summary = field.summary; 
       var heading = field.heading; 
       var news_date = field.news_date; 
       $("#newsview").append("<tr class='even gradeA' width = '30px'><td><li><b>"+heading+" - "+news_date+"</b> <br />"+summary+"</i></li><br /></td></tr>"); 
      }); 
     }); 
    }); 
    </script> 

これは私がAJAXコードを呼び出しているDIVです。

<!--NEWS PAGE --> 
       <div data-page="news" class="page cached"> 
        <div class="page-content"> 
         <div id="newsview"></div> 

        </div> 
       </div> 

私はIntelXDKを使用し、どういうわけか、私は携帯電話でテストしたときになぜそうなのか把握することができますFramework7ハイブリッドアプリケーション

を構築しています。 Framework7が特定のサイズを超えてデータを表示しないことがありますか？または、私のコードが何とか間違っています。

Answer 1

あなたのjs生成HTMLは無効です。

tr〜divのテーブル行が追加されています。また、liも含まれています。 ulまたはolの子ノードでなければなりません

trはtableとliの子ノードでなければなりません。

width = '30px'にはスペースを入れないでください：width='30px'。 ところで、本当にあなたのコンテンツのための狭いコンテナがほしいですか？

あなたは前に<i>が開いていない</i>タグを閉じています。

私は次のことをお勧め：その後、

$("#newsview").append(
    '<div class="even gradeA"><b>'+ 
    heading+ ' - ' +news_date+ 
    '</b><br><i>' +summary+ '</i></div>' 
); 

そして、それのスタイルをCSSを使用しています。