jQuery 和 JSON：将对象分解为表

发布于 2024-11-07 05:45:03 字数 467 浏览 0 评论 0原文

我需要一些帮助来浏览此对象：

{"COLUMNS":["ID","TYPE","NAME"],"DATA":[[1,"Image","My Image" ],[2,"文字","我的文字"],[3,"视频","我的视频"],[4,"视频","测试"],[5,"图像","测试名称"],[6,"图像","测试名称"],[7,"图像","测试名称" ],[8,"Image","testName"],[9,"Image","testName"],[10,"Image","testName"]]}

最好的方法是什么循环这个对象以便像这样显示它：

ID  | Type   | Name
1     Video    My Video
...   ...      ...

这个 JSON 对象显然是一个查询结果...很多查询需要像这样显示为表格数据，所以也许我应该创建一个类（函数）来处理这个结果。

原文

I need a little bit of help navigating through this object:

{"COLUMNS":["ID","TYPE","NAME"],"DATA":[[1,"Image","My Image"],[2,"Text","My Text"],[3,"Video","My Video"],[4,"video","test"],[5,"Image","testName"],[6,"Image","testName"],[7,"Image","testName"],[8,"Image","testName"],[9,"Image","testName"],[10,"Image","testName"]]}

What would be the best way to loop over this object in order to display it like so:

ID  | Type   | Name
1     Video    My Video
...   ...      ...

This JSON object is clearly a query result... a lot of queries will need to be displayed as tabular data like this, so perhaps I should create a class (function) that handles this result.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

何其悲哀 2024-11-14 05:45:03

headers = obj["COLUMNS"];
$(headers).each(function(index,item){ /* do something interesting */ });
data    = obj["DATA"];
$(data).each(function(index,item){ /* do something interesting */ });

在这种情况下，“有趣的事情”是从标题创建新的 TH 和 TD 元素，从数据行创建 TR 和 TD 元素。

您当然可以这样做。有时我认为人们对功能模型有点过分，牺牲了清晰度。）

$(obj["COLUMNS"]).each(...)

（如果您稍后不需要单独的标头和数据，

headers = obj["COLUMNS"];
$(headers).each(function(index,item){ /* do something interesting */ });
data    = obj["DATA"];
$(data).each(function(index,item){ /* do something interesting */ });

"Something interesting" in this case would be to create new TH and TD elements from the headers, TR and TD elements from the data rows.

(You could of course do

$(obj["COLUMNS"]).each(...)

if you don't need the headers and data separately later. Sometimes I think people go a little overboard with the functional model, sacrificing clarity.)

回复收藏 0 原文

霓裳挽歌倾城醉 2024-11-14 05:45:03

感谢 Charlie Martin，我编写了一个很好的小函数，它将获取查询结果并使用 jQuery 创建一个表：

function createTable(result) {

    var headers = result["COLUMNS"];
    var data = result["DATA"];      
    var tableHeader = "<table><thead><tr>";
    var tableBody = "<tbody>";
    var endTable = "</table>";

    $(headers).each(function(index,item){
        //alert("HEADER: " + item);

        tableHeader += "<th>" + item + "</th>";     

    });

    tableHeader += "</tr></thead>";
    $(tableHeader).appendTo("#placeholder");

    $(data).each(function(index,item){
        //alert("DATA: " + item);

        tableBody += "<tr>";

        $(item).each(function(index, secitem) {
            tableBody += "<td>" + secitem + "</td>";
        });

        tableBody += "</tr>";

    });

    tableBody += "</tbody>";

    $(tableBody).appendTo("#placeholder");              
    $(endTable).appendTo("#placeholder");

}

So thanks to Charlie Martin, I put together a nice little function that will take the result of the query and create a table using jQuery:

function createTable(result) {

    var headers = result["COLUMNS"];
    var data = result["DATA"];      
    var tableHeader = "<table><thead><tr>";
    var tableBody = "<tbody>";
    var endTable = "</table>";

    $(headers).each(function(index,item){
        //alert("HEADER: " + item);

        tableHeader += "<th>" + item + "</th>";     

    });

    tableHeader += "</tr></thead>";
    $(tableHeader).appendTo("#placeholder");

    $(data).each(function(index,item){
        //alert("DATA: " + item);

        tableBody += "<tr>";

        $(item).each(function(index, secitem) {
            tableBody += "<td>" + secitem + "</td>";
        });

        tableBody += "</tr>";

    });

    tableBody += "</tbody>";

    $(tableBody).appendTo("#placeholder");              
    $(endTable).appendTo("#placeholder");

}

回复收藏 0 原文

~没有更多了~