javascript - 如何将json文件加载到数据表中

Question

我对 Jquery 很陌生，我有一个使用 jquery ui 对话框将 json 文件加载到数据表的小任务，我正在使用 Visual Studio 2010 来完成此任务。

这是 json 代码:

{

"RELATIONMboSet":

{"rsStart":0,"rsCount":17,"RELATION":

[{"Attributes":{"RELATIONID":{"content":18,"resourceid":true},

"RELATIONNUM":{"content":"INCLUDES"},
"DESCRIPTION":{"content":"This is the container relationship for assets"},
"LANGCODE":{"content":"EN"},
"TYPE":{"content":"UNIDIRECTIONAL"},
"LINEAR":{"content":true},
"HASLD":{"content":false},
"IMPORTED":{"content":false},
"ISLINEARREF":{"content":false},
"USEWITH":{"content":"ASSET"},
"ALLOWOVERRIDE":{"content":false}}},{"Attributes":{"RELATIONID":{"content":17,"resourceid":true},
"RELATIONNUM":{"content":"CONNECTS"},"DESCRIPTION":{"content":"Source is connected to the Target"},
"LANGCODE":{"content":"EN"},"TYPE":{"content":"BIDIRECTIONAL"},"LINEAR":{"content":true},"HASLD":{"content":false},
"IMPORTED":{"content":false},"ISLINEARREF":{"content":false},"USEWITH":{"content":"ASSET"},
"ALLOWOVERRIDE":{"content":false}}},{"Attributes":{"RELATIONID":{"content":2,"resourceid":true},
"RELATIONNUM":{"content":"INSTALON"},"DESCRIPTION":{"content":"Installed On"},
"LANGCODE":{"content":"EN"},"TYPE":{"content":"UNIDIRECTIONAL"},"LINEAR":{"content":false},
"HASLD":{"content":false},"IMPORTED":{"content":false},"ISLINEARREF":{"content":false},
"USEWITH":{"content":"CI"},"ALLOWOVERRIDE":{"content":false}}},{"Attributes":{"RELATIONID":{"content":1,"resourceid":true},
"RELATIONNUM":{"content":"RUNSON"},"DESCRIPTION":{"content":"Runs On"},
"LANGCODE":{"content":"EN"},"TYPE":{"content":"UNIDIRECTIONAL"},"LINEAR":{"content":false},"HASLD":{"content":false},
"IMPORTED":{"content":false},"ISLINEARREF":{"content":false},"USEWITH":{"content":"CI"},
"ALLOWOVERRIDE":{"content":false}}},{"Attributes":{"RELATIONID":{"content":3,"resourceid":true},
"RELATIONNUM":{"content":"CONTAINS"},"DESCRIPTION":{"content":"Contains"},"LANGCODE":{"content":"EN"},
"TYPE":{"content":"UNIDIRECTIONAL"},"LINEAR":{"content":false},"HASLD":{"content":false},"IMPORTED":{"content":false},
"ISLINEARREF":{"content":false},"USEWITH":{"content":"CI"},
"ALLOWOVERRIDE":{"content":false}}},{"Attributes":{"RELATIONID":{"content":5,"resourceid":true},
"RELATIONNUM":{"content":"RELATES"},"DESCRIPTION":{"content":"Relates"},
"LANGCODE":{"content":"EN"},"TYPE":{"content":"BIDIRECTIONAL"},
"LINEAR":{"content":false},"HASLD":{"content":false},"IMPORTED":{"content":false},
"ISLINEARREF":{"content":false},"USEWITH":{"content":"CI"},
"ALLOWOVERRIDE":{"content":false}}},{"Attributes":{"RELATIONID":{"content":7,"resourceid":true},
"RELATIONNUM":{"content":"AFFECTS"},"DESCRIPTION":{"content":"Affects"},"LANGCODE":{"content":"EN"},
"TYPE":{"content":"UNIDIRECTIONAL"},"LINEAR":{"content":false},"HASLD":{"content":false},
"IMPORTED":{"content":false},"ISLINEARREF":{"content":false},"USEWITH":{"content":"CI"},
"ALLOWOVERRIDE":{"content":false}}},{"Attributes":{"RELATIONID":{"content":4,"resourceid":true},
"RELATIONNUM":{"content":"MANAGES"},"DESCRIPTION":{"content":"Manages"},"LANGCODE":{"content":"EN"},
"TYPE":{"content":"UNIDIRECTIONAL"},"LINEAR":{"content":false},"HASLD":{"content":false},
"IMPORTED":{"content":false},"ISLINEARREF":{"content":false},"USEWITH":{"content":"CI"},
"ALLOWOVERRIDE":{"content":false}}},{"Attributes":{"RELATIONID":{"content":6,"resourceid":true},
"RELATIONNUM":{"content":"FEDERATES"},"DESCRIPTION":{"content":"Federates"},"LANGCODE":{"content":"EN"},
"TYPE":{"content":"UNIDIRECTIONAL"},"LINEAR":{"content":false},"HASLD":{"content":false},
"IMPORTED":{"content":false},"ISLINEARREF":{"content":false},"USEWITH":{"content":"CI"},
"ALLOWOVERRIDE":{"content":false}}},{"Attributes":{"RELATIONID":{"content":11,"resourceid":true},
"RELATIONNUM":{"content":"INTERSECTS"},"DESCRIPTION":{"content":"Intersects With"},
"LANGCODE":{"content":"EN"},"TYPE":{"content":"BIDIRECTIONAL"},"LINEAR":{"content":true},
"HASLD":{"content":false},"IMPORTED":{"content":false},"ISLINEARREF":{"content":true},
"USEWITH":{"content":"ASSET"},"ALLOWOVERRIDE":{"content":false}}},{"Attributes":{"RELATIONID":{"content":14,"resourceid":true},
"RELATIONNUM":{"content":"BECOMES"},"DESCRIPTION":{"content":"One linear asset merges into another"},
"LANGCODE":{"content":"EN"},"TYPE":{"content":"UNIDIRECTIONAL"},"LINEAR":{"content":true},
"HASLD":{"content":false},"IMPORTED":{"content":false},"ISLINEARREF":{"content":true},
"USEWITH":{"content":"ASSET"},"ALLOWOVERRIDE":{"content":false}}},{"Attributes":{"RELATIONID":{"content":13,"resourceid":true},
"RELATIONNUM":{"content":"PARALLEL"},"DESCRIPTION":{"content":"One linear asset runs alongside another"},
"LANGCODE":{"content":"EN"},"TYPE":{"content":"BIDIRECTIONAL"},"LINEAR":{"content":true},
"HASLD":{"content":false},"IMPORTED":{"content":false},"ISLINEARREF":{"content":false},"USEWITH":{"content":"ASSET"},
"ALLOWOVERRIDE":{"content":false}}},{"Attributes":{"RELATIONID":{"content":15,"resourceid":true},
"RELATIONNUM":{"content":"SPLITS FROM"},"DESCRIPTION":{"content":"One linear asset diverges from another"},
"LANGCODE":{"content":"EN"},"TYPE":{"content":"UNIDIRECTIONAL"},"LINEAR":{"content":true},
"HASLD":{"content":false},"IMPORTED":{"content":false},"ISLINEARREF":{"content":true},
"USEWITH":{"content":"ASSET"},"ALLOWOVERRIDE":{"content":false}}},{"Attributes":{"RELATIONID":{"content":16,"resourceid":true},
"RELATIONNUM":{"content":"CARRIES"},"DESCRIPTION":{"content":"A bridge carries a linear asset"},
"LANGCODE":{"content":"EN"},"TYPE":{"content":"UNIDIRECTIONAL"},"LINEAR":{"content":true},"HASLD":{"content":false},
"IMPORTED":{"content":false},"ISLINEARREF":{"content":false},"USEWITH":{"content":"ASSET"},
"ALLOWOVERRIDE":{"content":false}}},{"Attributes":{"RELATIONID":{"content":37,"resourceid":true},
"RELATIONNUM":{"content":"BACKSUP"},"DESCRIPTION":{"content":"Backs Up"},"LANGCODE":{"content":"EN"},
"TYPE":{"content":"UNIDIRECTIONAL"},"LINEAR":{"content":true},"HASLD":{"content":false},
"IMPORTED":{"content":false},"ISLINEARREF":{"content":false},"USEWITH":{"content":"ASSET"},
"ALLOWOVERRIDE":{"content":false}}},{"Attributes":{"RELATIONID":{"content":39,"resourceid":true},
"RELATIONNUM":{"content":"BACKED UP BY"},"DESCRIPTION":{"content":"Backed up By"},"LANGCODE":{"content":"EN"},
"TYPE":{"content":"UNIDIRECTIONAL"},"LINEAR":{"content":true},"HASLD":{"content":false},
"IMPORTED":{"content":false},"ISLINEARREF":{"content":false},"USEWITH":{"content":"ASSET"},
"ALLOWOVERRIDE":{"content":false}}},{"Attributes":{"RELATIONID":{"content":41,"resourceid":true},
"RELATIONNUM":{"content":"MIRROR"},"DESCRIPTION":{"content":"Mirror"},"LANGCODE":{"content":"EN"},
"TYPE":{"content":"UNIDIRECTIONAL"},"LINEAR":{"content":false},"HASLD":{"content":false},
"IMPORTED":{"content":false},"ISLINEARREF":{"content":false},"USEWITH":{"content":"CI"},
"ALLOWOVERRIDE":{"content":false}}}]}}

并使用下面的 jquery ui 对话框:

<div id ='legend-dialog' >
    <table id="legend_table" style="width:100%">
      <tr>
        <th>Relation Name</th>
        <th>Description</th> 
        <th>Type</th>
        <th>Color</th>
      </tr>
      <tr>
        <td>INCLUDES</td>
        <td>This is the container relationship for assets.</td> 
        <td>UNIDIRECTIONAL</td>
        <td><div class="legencolor1" style='background-color:#888;'></div></td>
      </tr>
      <tr>
        <td>RELATES</td>
        <td>Relates</td> 
        <td>BIDIRECTIONAL</td>
        <td><div class="legencolor2" style='background-color:#888;'></div></td>
      </tr>           
    </table>    
    <p style="margin-top:5px">  
    <button type="button" class="btn btn-warning btn-xs" id="closebtn" style="float:left; margin-left:5px">Close</button>
    <button type="button" class="btn btn-primary btn-xs" id="applybtn" style="float:right; margin-right:5px">Apply</button>
    </p>
</div>

关于如何解决这个问题有什么想法吗？

Answer 1

这似乎有效:

$(document).ready(function(){
    var table = $('#example').DataTable({
        "columns":[
            {
                "title":"Relation Name"
            },
            {
                "title":"Description"
            },
            {
                "title":"Type"
            },
            {
                "title":"Color",
                "render": function(){
                    return '<div class="legencolor1" style="background-color:#888;">&nbsp;</div>';
                }
            }
        ]
    });
    $.each(data.RELATIONMboSet.RELATION, function(k, v){
        table.row.add([
            v.Attributes.RELATIONNUM.content,
            v.Attributes.DESCRIPTION.content,
            v.Attributes.TYPE.content
        ]).draw();
    })
});

只要在 jQuery 文档就绪函数之前将数据 block 分配给名为 data 的变量即可。

我尝试在 DataTable 初始化脚本中使用数据作为数据源，但它不喜欢 Attributes 作为名称...工作 JSFiddle: https://jsfiddle.net/annoyingmouse/hbs9p4us/

希望有帮助。