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>

这是 DIV 我正在调用 ajax 代码。

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

                    </div>
                </div>

我正在使用 IntelXDK 并构建一个 Framework7 混合应用程序

当我在移动设备上进行测试时，不知何故我可以弄清楚为什么会这样phone。难道Framework7不显示超过一定大小的数据？或者我的代码有问题。

Answer 1

很遗憾，您的 js 生成 HTML 无效。

您正在将 table 行 tr 附加到 div。它们还包含 li.

tr 应该是 table 的子节点，li 应该是 ul 或 ol 的子节点。

另外 width = '30px' 应该没有空格：width='30px'。顺便说一句，你真的想要这么窄的内容容器吗？

并且您有结束 </i> 标签，而之前没有开放 <i>。

我建议如下：

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

然后使用 CSS 设置样式。

DIV 未显示所有 JSON 检索到的数据

DIV not displaying all JSON retrieved data

html

javascript

ajax

json

html-framework-7