在 jquery 数据表中显示嵌套的 JSON 数据

Posted 2023-05-07

【中文标题】在 jquery 数据表中显示嵌套的 JSON 数据

【英文标题】：Display nested JSON data in jquery datatables

【发布时间】：2015-12-21 09:29:53

【问题描述】：

使用 AJAX 发出 POST 请求后，我得到以下 JSON 响应：

    
"ServiceName": "ABC",
"Response": 
    "Object": [
        
            "Attributes": 
                "Attribute": [
                    
                        "AttributeName": "Name",
                        "AttributeValue": "XYZ"
                    ,
                    
                        "AttributeName": "Place",
                        "AttributeValue": "Abc"
                    ,
                    
                        "AttributeName": "Country",
                        "AttributeValue": "Americas"
                    ,
                    
                        "AttributeName": "Code",
                        "AttributeValue": "576"
                    
                ]
            
        ,
        
            "Attributes": 
                "Attribute": [
                    
                        "AttributeName": "Name",
                        "AttributeValue": "XYZHJ"
                    ,
                    
                        "AttributeName": "Place",
                        "AttributeValue": "Abchgh"
                    ,
                    
                        "AttributeName": "Country",
                        "AttributeValue": "India"
                    ,
                    
                        "AttributeName": "Code",
                        "AttributeValue": "536"
                    
                ]
            
        
    ]

我正在使用数据表来显示数据。但使用这个嵌套的 JSON，我无法直接获取数据。 我用这个https://datatables.net/examples/server_side/post.htmlhttps://datatables.net/reference/option/ajax.dataSrc作为参考。

【问题讨论】：

您的问题是什么？你的代码在哪里？您给我们的只是您的 JSON 响应，但没有代码。我们应该如何帮助您？

与服务器端处理returned data 有不同的格式。您发布的内容与预期返回的 JSON 不匹配。

【参考方案1】：

您必须遍历响应并将其转换为 dataTables 可以理解的格式。当我阅读示例数据时，您有一个Object 持有Attributes 的块，持有一个Attribute，键=> 值对为AttributeName => AttributeValue。所以在 dataSrc 回调中解析响应：

var table = $("#example").DataTable(
    ajax : 
        url : 'nestedData.json',
        dataSrc : function(json) 
            var temp, item, data = [];
            for (var i=0;i<json.Response.Object.length;i++) 
                temp = json.Response.Object[i].Attributes.Attribute;
                item = ;
                for (var elem in temp)             
                    item[temp[elem].AttributeName] = temp[elem].AttributeValue
                
                data.push(item);
            
            return data
        
    ,
    columns : [
         data : 'Name', title : 'Name' ,
         data : 'Place', title : 'Place'  ,
         data : 'Country', title : 'Country' ,        
         data : 'Code', title : 'Code' 
    ]    
)

dataSrc 回调在表单上返回一个对象数组：

data = [
   Code: "576", Country: "Americas", Name: "XYZ", Place: "Abc" ,
   Code: "536", Country: "India", Name: "XYZHJ", Place: "Abchgh" 
]