0

我有 HTML 网页，我想在其中显示 JSON 数据，我正在使用以下代码，但它没有在页面上显示任何内容。

我正在使用 URL 获取数据 JSON，该 URL 也列在 code 中。

jQuery

$("document").ready(function () {
    $.getJSON("http://www.celeritas-solutions.com/pah_brd_v1/productivo/getGroups.php?organizationCode=att&userId1", function (data) {
        $("#div-my-table").text("<table>");
        $.each(data, function (i, item) {
            $("#div-my-table").append("<tr><td>" + item.EncoderName + "</td><td>" + item.EncoderStatus + "</td></tr>");
        });
        $("#div-my-table").append("</table>");
    });
});

HTML

<table id="div-my-table"></table>
4

4 回答 4

2 
    $("#div-my-table").text("<table>");
    $.each(data, function (i, item) {
        $("#div-my-table").append("<tr><td>" + item.EncoderName + "</td><td>" + item.EncoderStatus + "</td></tr>");
    });
    $("#div-my-table").append("</table>");

append不会像那样直接输出html。它会附加完整的元素，不会占用 html 的碎片。你要：

    var $table = $("<table></table>");
    $.each(data, function (i, item) {
        $table.append($("<tr><td>" + item.EncoderName + "</td><td>" + item.EncoderStatus + "</td></tr>"));
    });
    $("#div-my-table").append($table);

编辑

要使其成为完整的解决方案，您还需要$(document)而不是$("document").

于 2013-09-10T05:06:38.407 回答
1

我认为这是你的问题

$("document").ready(function () {

删除引号

$(document).ready(function () {
于 2013-09-10T05:04:14.470 回答
1

以下部分

$("#div-my-table").text("<table>");

$.each(data, function(i, item) {
    $("#div-my-table").append("<tr><td>" + item.EncoderName +"</td><td>" + item.EncoderStatus + "</td></tr>");
});

$("#div-my-table").append("</table>");

应该是这样的：

var $table = $('<table></table>');
$.each(data, function(i, item) {
    $table.append("<tr><td>" + item.EncoderName +"</td><td>" + item.EncoderStatus + "</td></tr>");
});
$("#div-my-table").append($table);

另外：$('document')应该是$(document)因为$('document')寻找<document></document>不存在的元素。而$(document)将文档全局对象转换为 jQuery 对象。

在第一次更正中，请记住$.text('')不处理 html，并将结果写为'&lt;table&gt;'. 上面更正的模型也更好，因为使用断开/未连接的 jquery 对象从迭代器中填充元素更快。

编辑：您指定的网址被 chrome 标记为恶意软件，因此我使用的是替代服务http://date.jsontest.com/。此外，由于该服务只返回一个对象，我自己将该对象包装在一个数组中，以便您仍然可以看到它$.each是如何工作的。小提琴在这里：http: //jsfiddle.net/2xTjf/

于 2013-09-10T05:07:43.717 回答
1

我们可以实现Jquery Template，方便渲染JSON数据。用法如下

1.下载“ jquery.tmpl.min.js ”文件并包含在您的页面中。

2.我们将表格
视为我们的容器。我们将定义需要插入到容器中的模板。

模板示例：

  //The data inside JSON object we will use as follows
 //Note:Template definition should be inside Script tag same as javascript functions
 <script id="tableContentTemplate" type="text/x-jquery-tmpl">
    <tr> 
      <td> Deal Id :\${EncoderName }</td> 
      <td> Deal Id :\${EncoderStatus }</td> 
    </tr>   
 </script>

3.定义通过模板将数据渲染到容器的方法。根据需求，我们可以更改这些方法，因为它们是用户定义的方法

 function emptyContainer(container){    
  $( container ).empty();    
 }

function renderTemplate( container, template, data ){        
  $.tmpl( $(template), data, {array: data} ).appendTo( container );
}

function AddExtraTemplate( container, template ){
    $.tmpl( $(template)).appendTo( container );
}

4.Ajax成功函数调用方法如下 

 $.getJSON("http://www.celeritas-solutions.com/pah_brd_v1/productivo/getGroups.php?organizationCode=att&userId1", function (data) {
    emptyContainer("#div-my-table");//empty container
    renderTemplateForOffice( "#div-my-table", "#tableContentTemplate" , data ); 
    // render template based on data.For multiple values it will render multiple times.Separate Iteration is not required.
});

请检查您的 json 数据，它应该如下所示 {'EncoderName':'XYZ','EncoderStatus':'Completed'}

于 2013-09-10T05:46:38.053 回答