javascript - KendoUI Grid - 具有不一致键的复杂 JSON

Question

我知道这可能以前被问过，但在尝试找到答案之后 - 我猜测要么我没有理解一些正确的答案，要么我对问题的看法完全错误。

我正在使用复杂的 SLC 环回查询 - 并且 API 按以下格式返回 JSON:

> [ {"id":"1","name":"John", "type":"commercial", 
> "address":{"street1":"1 dalhousie lane", "street2":"some street"}},

> {"id":"2","name":"Jane", "type":"commercial", 
> "address":{"street1":"15 dalhousie lane", "postcode":"1283833"}},

> {"id":"3","name":"Jack", "address":{"street1":"12 dalhousie lane",
> "postcode":"9383833", "geo":{"lat":"9393939","long":"99393939"}}} 

]

如您所见，存在以下问题 -1. 嵌套 JSON - 多层次2. 不一致/缺失关键值， 例如:“id”:“2”->“类型”-> 缺失 例如:“id”:“3”->“地址”->“地理位置”

当我尝试使用 KendoUI 网格显示上述 json 时，出现诸如 - property undefined 之类的错误。我了解，我可以探索的选项以及我应该做什么 -

1. 定义架构 - 如何定义？特别是对于丢失的 key 。
2. 解析数据？

如果有人能让我知道如何继续推进这件事，那就太好了。下面是网格的代码 -

                 $("#grid").kendoGrid({
                    dataSource: {
                        transport: {
                            read: {
                                url: apiurl,
                                dataType: "json",
                            }
                        }
                    },
                    columns: [
                        {
                            field: "id",
                            title: "User Id"
                        },
                        {
                            field: "name",
                            title: "User Name",
                        },
                        {
                            field: "type",
                            title: "User Type",
                        },
                        {
                            field: "address.street1",
                            title: "Street 1",
                        },
                        {
                            field: "address.street2",
                            title: "Street 2",
                        },
                        {
                            field: "address.postcode",
                            title: "Street 2",
                        },
                        {
                            field: "address.geo.lat",
                            title: "Latitude",
                        },
                        {
                            field: "address.geo.long",
                            title: "Longitude",
                        }
                    ]
                });

Answer 1

您可以使用column templates :

columns: [
        {
            field: "id",
            title: "User Id"
        },
        {
            field: "name",
            title: "User Name",
        },
        {
            field: "type",
            title: "User Type",
            template: function(dataItem) {
                         return dataItem.type ? kendo.htmlEncode(dataItem.type) : "";
                      }
        },
        {
            field: "address",
            title: "Street 1",
            template: function(dataItem) {
                         return dataItem.address.street1 ? kendo.htmlEncode(dataItem.address.street1) : "";
                      }
        },
        {
            field: "address",
            title: "Street 2",
            template: function(dataItem) {
                         return dataItem.address.street2 ? kendo.htmlEncode(dataItem.address.street2) : "";
                      }
        },
        {
            field: "address",
            title: "Post Code",
            template: function(dataItem) {
                         return dataItem.address.postcode ? kendo.htmlEncode(dataItem.address.postcode) : "";
                      }
        },
        {
            field: "address",
            title: "Latitude",
            template: function(dataItem) {
                         return dataItem.address.geo && dataItem.address.geo.lat ? kendo.htmlEncode(dataItem.address.geo.lat) : "";
                      }
        },
        {
            field: "address",
            title: "Longitude",
            template: function(dataItem) {
                         return dataItem.address.geo && dataItem.address.geo.long ? kendo.htmlEncode(dataItem.address.geo.long) : "";
                      }
        }
    ]

每个模板都是一个函数，用于检查字段是否存在，然后返回字段值或空字符串。

Working DEMO