如何在jQuery.dataTables中使用嵌套的基于json的格式值？

Question

现在假设我有一个如下所示的json数据：

{                ＆＃34; ServiceName＆＃34;：＆＃34; cacheWebApi＆＃34;，                ＆＃34;描述＆＃34;：＆＃34;这是一个CacheWebApiService＆＃34;，                ＆＃34; IsActive＆＃34;：是的，                ＆＃34;网址＆＃34;：[{＆＃34;服务地址＆＃34;：＆＃34; http://192.168.111.210:8200＆＃34;，＆＃34;重量＆＃34;：5，＆＃34; IsAvailable＆ ＃34;：true}，                    {＆＃34; ServiceAddress＆＃34;：＆＃34;，http://192.168.111.210:8200＆＃34;，＆＃34;权重＆＃34;：3，＆＃34; IsAvailable＆＃34;：true}]            }

现在令我担心的是＆＃34; Urls＆＃34;是另一个嵌套的json形成。那么如何将这个值绑定到数据表？你有什么好主意吗（例如：我只想显示所有的ServiceAddress）......

Answer 1

这应该做你需要的：

        $("#btnAddBuild").click(function(){
        var htmlContent = "<div class='row' style='margin-bottom: 10px;'>" +
                                "<div class='col-xs-4 col-sm-2'>" +
                                    "<button type='button' class='action btn btn-default'><span class='glyphicon glyphicon-cog'></span></button>" +
                                    "<button type='button' class='action btn btn-default'><span class='glyphicon glyphicon-remove'></span></button>" +
                                "</div>" +
                            "</div>"
        //console.log(htmlContent);
        $("#rowListBuilds").append(htmlContent);
    });

您应该将数据放入数组中。工作JSFiddle

修改

如果没有定义网址的数量，那么您可以执行以下操作：

var data = [{
    "ServiceName": "cacheWebApi",
    "Description": "This is a CacheWebApiService",
    "IsActive": true,
    "Urls": [
        {
            "ServiceAddress": "http://192.168.111.210:8200",
            "Weight": 5,
            "IsAvailable": true
        },
        {
            "ServiceAddress": ",http://192.168.111.210:8200",
            "Weight": 3,
            "IsAvailable": true
        }
    ]
}];
$(function() {
    var table = $('#example').dataTable({
        "data": data,
        "columns": [
            {
                "data": "ServiceName"
            }, {
                "data": "Description"
            }, {
                "data": "IsActive"
            }, {
                "data": "Urls[0].ServiceAddress"
            }, {
                "data": "Urls[0].Weight"
            }, {
                "data": "Urls[0].IsAvailable"
            }, {
                "data": "Urls[1].ServiceAddress"
            }, {
                "data": "Urls[1].Weight"
            }, {
                "data": "Urls[1].IsAvailable"
            }
        ],
    });
});

我想这并不是很棒，但你几乎可以做任何事情，例如：

var table = $('#example').dataTable({
    "data": data,
    "columns": [
        {
            "data": "ServiceName"
        }, {
            "data": "Description"
        }, {
            "data": "IsActive"
        }, {
            "data": "Urls",
            "render": function(d){
                return JSON.stringify(d);
            }
        }
    ],
});