Question

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

我的代码是这样的，

<select id="mySelect">
  <option>Apple</option>
  <option>Orange</option>
  <option>Pineapple</option>
  <option>Banana</option>
</select>

和geojson文件是

    <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" }
    ] 
 });
});

My output is as shown in image

Answer 1

问题可能是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" }
]

Answer 2

问题实际上是数据文件，它是有效的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/

如何使用javascript将geojson数组传递给数据表dyanamically

2 个答案: