[GIS] How to pass GeoJSON array to datatable dynamically using Javascript

geojsonhtmljavascriptjquery

I want to pass one GeoJSON file to a dynamically created datatable using Javascript, I am unable to identify the column names in the file. I have tried this:

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

And the GeoJSON file is

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

Output is shown as

Best Answer

Your data is stored in the features array. You can access that by specifying a custom datasource within the ajax property like this: "dataSrc": "features".

I haven't found a way to get the GeoJSON property "type": "FeatureCollection" that way, it is outside of the actual data "rows".

The complete code:

$(document).ready(function() {
  $('#example').DataTable( {
    "ajax":{
      "url":"json_file.json",
      "dataSrc": "features"
    },
    "columns": [
      { data: "type" },
      { data: "geometry.type" },
      { data: "properties.propA" },
      { data: "geometry.type" },
      { data: "geometry.coordinates.0" },
      { data: "geometry.coordinates.1" }
    ]
  });
});

Another note, properties is another nested object (see docs here and here) where you will have to be specific with the column names, I used properties.propA as an example. There does not seem to be an easy way to simply list them all.

Demo: https://plnkr.co/edit/fxhlwfARJEQjMStbZMGx

Related Question