jQuery代码以使用附加信息显示对html表的json响应 [英] jquery code to display json response to a html table using append

查看:61
本文介绍了jQuery代码以使用附加信息显示对html表的json响应的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

有人可以帮我用代码在html表中显示json数据吗

Can some one help me out with code to display the json data in html table

 $.getJSON("http://10.0.2.2:8080/v1/service/1",
  function(data) {

    $.each(data, function(id, obj){

      });
});


<body>
   <table id="display">
   </table>
</body>

我想在显示表中显示json数据

I want to display the json data in display table

json响应数据:

[
    {
        "firstcolumn":"56036",
        "loc":"Deli",
        "lastA":"Activity",
        "mTime":"2011-02-01 11:59:26.243",
        "nTime":"2011-02-01 10:57:02.0",
        "Time":"2011-02-01 10:57:02.0",
        "Age":"9867 Hour(s)",
        "ction":"                                                  ",
        "nTime":null
    },
    {
        "firstcolumn":"56036",
        "loc":"Deli",
        "lastA":"Activity",
        "mTime":"2011-02-01 11:59:26.243",
        "nTime":"2011-02-01 10:57:02.0",
        "Time":"2011-02-01 10:57:02.0",
        "Age":"9867 Hour(s)",
        "ction":"                                                  ",
        "nTime":null
    },
    {
        "firstcolumn":"56036",
        "loc":"Deli",
        "lastA":"Activity",
        "mTime":"2011-02-01 11:59:26.243",
        "nTime":"2011-02-01 10:57:02.0",
        "Time":"2011-02-01 10:57:02.0",
        "Age":"9867 Hour(s)",
        "ction":"                                                  ",
        "nTime":null
    },
    {
        "firstcolumn":"56036",
        "loc":"Deli",
        "lastA":"Activity",
        "mTime":"2011-02-01 11:59:26.243",
        "nTime":"2011-02-01 10:57:02.0",
        "Time":"2011-02-01 10:57:02.0",
        "Age":"9867 Hour(s)",
        "ction":"                                                  ",
        "nTime":null
    }
]

推荐答案

无论如何,您没有提供更多信息,但是如果您的json(数据)结构是这样的

You didn't give more information but anyway, If your json (data) structure is something like this

{
  "key_one": "value_one",
  "key_two": "value_two",
  "key_three": "value_three"
}

然后您可以在回调函数中完成

then you can do in your callback function

$.each(data, function(key, val) {
    $('<tr><td>ID: '+key+'</td><td id="'+key+'">'+val+'</td><tr>').appendTo('#display');
});

这将创建一个类似于 此示例 的表格.希望它能帮助您完成工作.

This will make a table like this example. hope it'll help you to get done your work.

更新

function(data) {
    $.each(data, function(key, val) {
        var tr=$('<tr></tr>');
        $.each(val, function(k, v){
            $('<td>'+v+'</td>').appendTo(tr);
        });
        tr.appendTo('#display');
    });​
});​

这是一个示例.

您的完整getJSON

$.getJSON("http://10.0.2.2:8080/v1/service/1",
    function(data) {
        $.each(data, function(key, val) {
            var tr=$('<tr></tr>');
            $.each(val, function(k, v){
                $('<td>'+v+'</td>').appendTo(tr);
            });
            tr.appendTo('#display');
        });​
    });​
});

这篇关于jQuery代码以使用附加信息显示对html表的json响应的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆