logo标签列表

jQuery - 将JSON转换为<table>

jquery
8

I have Json of the form

[{"id":39,"data":1},{"id":40,"data":2}]

这个数据无法通过 jQuery.parseJSON() 正确解析。

我需要将这个数据转换为 HTML table。我考虑在 JS 中动态创建 HTML。

A. 如何解析这个 JSON 数据？
B. 动态创建 HTML 是否是最佳方式？

更新
抱歉，我的问题显然不太清楚。下面是 jQuery 代码：

 $.get('Service.aspx',
    { p1: value, p2: value },
    function (data) {
        notesJson = data;
        alert(notesJson);//Json comes back as I said here...
        var noteSet = jQuery.parseJSON(notesJson);
        alert(noteSet.notes);                      
 });

Json中存在注释。第二个警告失败，显示“未定义”。

@Neal $.get请求发送到使用JavaScriptSerializer的ASP.NET页面http://msdn.microsoft.com/en-us/library/system.web.script.serialization.javascriptserializer.aspx - P.Brian.Mackey
$.parseJSON（'[{"id":39,"data":1},{"id":40,"data":2}]'）; 在我的火狐控制台中工作。你遇到了什么问题？出现错误、空对象？哪个浏览器给你带来了问题？ - Robert Beuligmann
你是否在寻找noteSet[0].notes？根据你的数据格式描述，noteSet应该是一个对象数组。 - Robert Beuligmann
@P.Brian.Mackey 我根据您的更新编辑了我的答案。 - Naftali
我在你的jQuery中没有看到任何名为“notes”的元素。 - Naftali
显示剩余2条评论
7个回答
23

根据您在问题中的评论：

请使用$.getJSON而不是$.get：

$.getJSON('someurl', {/*somedata*/}, function(json_data){

    //no need for parsejson
    //use the json_data object

    var table_obj = $('table');
    $.each(json_data, function(index, item){
         var table_row = $('<tr>', {id: item.id});
         var table_cell = $('<td>', {html: item.data});
         table_row.append(table_cell);
         table_obj.append(table_row);
    })

})
1
不必像Neal的回答那样使用字符串字面量，你可以使用相当多的JavaScript模板库。Microjs列出了相当多的库，还有jQuery Templates。 - Craig M
我使用了您的原始答案。$.getJson非常准确和简单。 - P.Brian.Mackey
我回滚到了那个原始答案。 - Naftali
5
你手头的是一个数组，但你需要的是一个对象。试试这样做：
 { "notes" : [{"id":39,"data":1},{"id":40,"data":2}] }

作为JSON，或者这样做。
  alert(noteSet[0]);
  alert(noteSet[1]);
据我所知 - 我无法控制.NET序列化Json的方式。我正在ASP.NET中使用JavaScriptSerializer类。 - P.Brian.Mackey
@P.Brain，这是因为我认为您正在使用.get函数。如果您使用.ajax，您可以指定协议，并且这与.net更兼容。此外，您可以包装您的结果或使用json序列化器。 - Hogan
@Hogan，当传入最后一个参数时，您也可以使用.get指定协议。 - Naftali
@Neal - 我刚刚穿越了20个月的时间吗？ - Hogan
是的，你做到了 ^_^ 时间上有点神奇。 - Naftali
2

这里有另一个好的库可以简单地实现这一点：

https://github.com/afshinm/Json-to-HTML-Table

只需将JSON数据传递给此库即可获得HTML表格：

//Only first parameter is required
var jsonHtmlTable = ConvertJsonToTable(objectArray, 'jsonTable', null, 'Download');
1

你说你正在使用.NET，所以你可以使用

return Json(yourObject, JsonRequestBehavior.AllowGet);

使用JavaScriptSerializer的替代方案。

您无需进行解析。

0

一个接受JSON数据填充表格的jQuery插件是可以做到的。jsonTable

0

这是另一种考虑到典型数据库查询表格标题的方法。基于尼尔的回答：

$.getJSON('bower.json', {}, function(json_data) {
            var table = $('table');
            $.each(json_data, function(key, item) {
                var table_row = $('<tr>');
                $.each(item, function(itemKey, itemValue) {
                    if (key == 0) {
                        table.append($('<th>', {html: itemKey}));
                    }
                    table_row.append($('<td>', {html: itemValue}));
                });
                table.append(table_row);
            });
        });
0

尝试这个完整的代码：

<head>
    <script type="text/javascript">  
    $.getJSON('URL', function(json_data){

        var table_obj = $('table');
        $.each(json_data, function(index, result){
             var table_row = $('<tr>', {});
             var table_cell1 = $('<td>', {html: result.firstName});//result.yourDataAttributes
             var table_cell2 = $('<td>', {html: result.lastName});
             var table_cell3 = $('<td>', {html: result.age});
             table_row.append(table_cell1,table_cell2,table_cell3);
             table_obj.append(table_row);
        })

    });
    </script>
</head>
<body> 
<table id=""></table> 
</body>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接