如何使用javascript动态地将json数组传递给数据表答案

【问题标题】：How to Pass geojson array to datatable dyanamically using javascript如何使用javascript动态地将json数组传递给数据表
【发布时间】：2016-10-09 20:17:11
【问题描述】：

我想将一个 geojson 文件传递给使用 javascript 动态创建的数据表，我无法识别文件中的列名.. 这个我试过了。。

代码

<body>
    <table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>fC.type</th>
                <th>f.type</th>
                <th>f.prop</th>
                <th>f.geom.type</th>
                <th>geometry.coordinates.0</th>
                <th>geometry.coordinates.1</th>
            </tr>
        </thead>
    </table>
</body>

$(document).ready(function () {
    $('#example').dataTable({
        "ajax": "data/json_file.json",
        "processing": true,
        "columns": [
            { "mData": "type" },
            { "mData": "features.type" },
            { "mData": "features.properties" },
            { "mData": "geometry.type" },
            { "mData": "geometry.coordinates.0" },
            { "mData": "geometry.coordinates.1" }
        ]
    });
});

geojson 文件

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            40.078125,
            57.136239319177434
          ],
          [
            91.7578125,
            58.99531118795094
          ]
        ]
      }
    }
  ]
}

My output is as shown in image

【问题讨论】：

标签： javascript jquery html datatable geojson

【解决方案1】：

问题实际上是数据文件，它是有效的 JSON，但不是数据表所需的结构。

解决方案 1：将文件更改为预期的结构。

{
  "data": [
    {
      "type": "FeatureCollection",
      "features": [
        {
          "type": "Feature",
          "properties": {},
          "geometry": {
            "type": "LineString",
            "coordinates": [
              [
                40.078125,
                57.136239319177434
              ],
              [
                91.7578125,
                58.99531118795094
              ]
            ]
          }
        }
      ]
    }
  ]
}

解决方案2：使用dataSrc可以在datatable使用之前修改ajax响应。

$('#example').dataTable({
    "ajax":
    {
        "url": "json1.json",
        "dataSrc": function (json) {

            var obj = [];
            obj.data = [];
            obj.data[0] = json;

            return obj.data;
        },
    },
    "processing": "true",
    "columns": [
        { "data": "type" },
        { "data": "features.0.type" },
        { "data": "features.0.properties" },
        { "data": "features.0.geometry.type" },
        { "data": "features.0.geometry.coordinates.0" },
        { "data": "features.0.geometry.coordinates.1" }
    ]
});

这里我所做的是创建了一个新对象 obj。在这里工作小提琴：https://jsfiddle.net/ourqh9ts/

【讨论】：

【解决方案2】：

问题可能在于 GeoJSON 不是一个数组而是一个对象。

尝试使用这些更改列定义：

"columns": [
     { "data": "type" },
     { "data": "features.0.type" },
     { "data": "features.0.properties" },
     { "data": "features.0.geometry.type" },
     { "data": "features.0.geometry.coordinates.0" },
     { "data": "features.0.geometry.coordinates.1" }
]

【讨论】：

我试过这个，我得到一个错误，“未捕获的类型错误：无法读取未定义的属性'长度'”。