在 jquery 数据表中显示嵌套的 JSON 数据 [英] Display nested JSON data in jquery datatables

问题描述

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

After making a POST request using AJAX I get the following JSON response:

    {
"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 供参考.

I am using datatable to display the data.. but with this nested JSON I am not able to go straight for the data. I am using this https://datatables.net/examples/server_side/post.html https://datatables.net/reference/option/ajax.dataSrc for reference.

推荐答案

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

You must iterate over the response and convert it into a format dataTables can comprehend. As I read the sample data you have an Object holding blocks of Attributes holding an Attribute with key => value pairs as AttributeName => AttributeValue. So parse the response in a dataSrc callback :

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 回调返回表单上的对象数组:

the dataSrc callback return an array of objects on the form :

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

这篇关于在 jquery 数据表中显示嵌套的 JSON 数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！