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" -> "type" -> 缺失 例如："id":"3" -> "address" -> "geo"

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

1. 定义架构 - 如何定义？尤其是缺少钥匙。
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) : "";
                      }
        }
    ]

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

工作DEMO

Answer 2

另一个选项是使用 schema.parse 方法来处理为缺少的字段添加默认值。这是文档的链接 - http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.parse

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      url: "yoururl",
      dataType: "jsonp"
    }
  },
  schema: {
    parse: function(response) {
      var items = [];
      for (var i = 0; i < response.length; i++) {
        var item = response[i];
        if(!item.address.geo){
             if(!item.address.geo.lat){
                  item.address.geo.lat = 0.0;
             }
        }

        items.push(item);
      }
      return items;
    }
  }
});
dataSource.fetch(function(){
  var data = dataSource.data();
  var product = data[0];
  console.log(product.name);
});
</script>

希望这会有所帮助。

韦德