0

我正在尝试将 JSON 呈现到 HTML 表中。但难点在于它需要遍历 JSON 并在必要时呈现多个列。

对于下面的示例，我想要的是：

想要的结果

想要的结果 

<table>
<tr><th>AppName</th><td>App 1</td><td>App 2</td></tr>
<tr><th>Last Modified</th><td>10/1/2012</td><td></td></tr>
<tr><th>App Logo</th><td>10/1/2012</td><td></td></tr>
blahblah
</table>

<table>
<tr><th>AppName</th><td>App 1</td></tr>
blahblah
</table>

JSON 示例

"Records": [
    {
        "AppName": "App 1",
        "LastModified": "10/1/2012, 9:30AM",
        "ShipTo_Name": "Dan North",
        "ShipTo_Address": "Dan North",
        "ShipTo_Terms": "Dan North",
        "ShipTo_DueDate": "Dan North",
        "Items 1": [
            {
                "Item_Name": "Repairs",
                "Item_Description": "Repair Work"
            }
        ]
    },
    {
        "AppName": "App 2",
        "AppLogo": "http://www.google.com/logo.png",
        "LastModified": "10/1/2012, 9:30AM",
        "BillTo_Name": "Steve North",
        "Items 1": [
            {
                "Item_Name": "Repairs",
                "Item_Description": "Repair Work"
            }
        ]
    }
],
"Records": [
    {
        "AppName": "App 1",
        "LastModified": "10/1/2012, 9:30AM",
        "ShipTo_Name": "222",
        "ShipTo_Address": "333 ",
        "ShipTo_Terms": "444",
        "ShipTo_DueDate": "5555",
        "Items 1": [
            {
                "Item_Name": "Repairs",
                "Item_Description": "Repair Work"
            }
        ]
    }
],

我现在使用的代码

function CreateComparisonTable (arr,level,k) {
    var dumped_text = "";
    if(!level) level = 0;

    //The padding given at the beginning of the line.
    var level_padding = "";
    for(var j=0;j<level+1;j++) level_padding = "--";

    if(typeof(arr) == 'object') { //Array/Hashes/Objects
        for (var item in arr) {
            var value = arr[item];
            if (typeof(value) == 'object') { //If it is an array,
                if(item !=0) {
                    dumped_text += '<tr><td>' + item + '<br>';
                    dumped_text += CreateComparisonTable(value,level+1);
                    dumped_text += '</td></tr>';
                } else {
                    dumped_text += CreateComparisonTable(value,level, value.length);
                }
            } else {
              dumped_text += '<tr><td>' + level_padding + item + '</td><td>' + value + '</td></tr>';
            }
        }
    } 
    return dumped_text;
}

Jsfiddle在这里

4

4 回答 4

1

DataTables是 jQuery 的一个插件，非常适合这种场景，它的代码中“嵌入”了很多特性。

我用过它，它几乎可以处理我扔给它的所有东西。

于 2012-10-12T18:23:06.640 回答
0

您可能想考虑使用诸如Mustache之类的模板语言

您可能会发现这个问题很有用：How to Structure JSON and build HTML via jQuery

于 2012-10-12T18:14:22.637 回答
0

看看我刚刚制作的关于jsfiddle的比较图表。当从下拉菜单中检测到选择事件时，将动态填充各个单元格。也许您可以分叉小提琴并使用一些代码来完成您想要对表执行的操作。

于 2012-10-12T18:51:55.863 回答
0

我会推荐jtemplates。一个 jQuery 插件http://jtemplates.tpython.com/它是一种强大的模板语言，代码可以存储在任何地方。在页面中内联，在一个单独的文件中最适合您。它看起来很像 asp 经典。看一看

{#template MAIN}
 <div id="header">{$T.name}</div>
 <table>
 {#foreach $T.table as r}
  {#include row root=$T.r}
 {#/for}
 </table>
{#/template MAIN}

{#template row}
 <tr bgcolor="{#cycle values=['#AAAAEE','#CCCCFF']}">
  <td>{$T.name.bold()}</td>
  <td>{$T.age}</td>
  <td>{$T.mail.link('mailto:'+$T.mail)}</td>
 </tr>
{#/template row}
于 2012-10-12T18:31:40.223 回答