Parsing GeoJSON in Datatables

enjoypb

I'm using GeoJSON for my Mapzen/Tangram/Leaflet maps and it would be helpful if I could use the same GeoJSON table because I'm going to do some linking in the future (eg. including having both the table and map on the same page). I've had other tables up without troubles but, that was doing serverside processing.

Thank you very much for any help.

An example of my data is:

{  
    "type":"FeatureCollection",
    "features":[  
        {  
            "type":"Feature",
            "geometry":{  
                "type":"Point",
                "coordinates":[  
                    -118.2911315,
                    33.99289391
                ]
            },
            "properties":{  
                "id":1749,
                "type":"21",
                "license":"100409",
                "lic_app":"LIC",
                "status":"ACTIVE",
                "dupe":"    ",
                "master":"Y",
                "dba":"VERMONT CENTER LIQUOR",
                "prem_st_1":"5402 S VERMONT AVE"
            }
        }

I tried this without luck and keep getting this error and believe it's because I'm not matching up the GeoJSON file data elements correctly (the same number in the columns as available in the source). This is first elements of the error message:
jQuery.Deferred exception: Cannot read property 'style' of undefined TypeError: Cannot read property 'style' of undefined

    $(document).ready(function() {
      $('#myTableName').DataTable( {
        "ajax":{
          "url":"../path/to/filename.geojson",
          "dataSrc": "features"
        },
        "columns": [
            { data: 'id' },
            { data: 'type' },
            { data: 'license' },
            { data: 'lic_app' },
            { data: 'status' },
            { data: 'dupe' },
            { data: 'master' },
            { data: 'dba' },
            { data: 'prem_st_1' }
        ]
      });
    });

+++++++++++++++++++++++++++
this seemed to be the best answer:
http://gis.stackexchange.com/questions/198108/how-to-pass-geojson-array-to-datatable-dyanamically-using-javascript but, I've been unable to make it work. His plnkr is here: https://plnkr.co/edit/fxhlwfARJEQjMStbZMGx

A notable thing with this solution is that I have a regular data column named 'type' and in this example the author is using the data field 'type' from the geometry section.

+++++++++++++++++++++++++++
and I tried this as well due to this post: http://gis.stackexchange.com/questions/198108/how-to-pass-geojson-array-to-datatable-dyanamically-using-javascript without luck as well

+++++++++++++++++++++++++++
I found this post that suggests converting GeoJSON to json: http://www.codingcage.com/2016/06/parse-json-data-easily-in-jquery.html
+++++++++++++++++++++++++++
I found this post but, it's four years old and I didn't try for too long on it: https://gist.github.com/patsweet/6001283

allan

You need to use the nesting options for columns.data for this to work. For example:

        { data: 'properties.id' },
        { data: 'type' },
        { data: 'properties.license' },

Note that it didn't use object notation for the type since I presume you want that from the string parameter at the top of your object.

Allan

enjoypb

Awesome, thanks Allan.

enjoypb

I never resolved this and could use a bit of help.

I'm still getting this error: 'datatables.min.js:100 Uncaught TypeError: Cannot read property 'length' of undefined'

One of my cols is named 'type' so I'm not sure if that's messing things up. My geojson includes the sample record below. My code is:

$('#psLicense').DataTable({
  ajax: 'path/to/file/name/file.geojson',
  columns: [
        { data: 'properties.lic_app' },
        { data: 'properties.class_label'},
        { data: 'properties.type' },
        { data: 'properties.status' },
        { data: 'properties.dba' },
        { data: 'properties.prem_st_1' },
        { data: 'properties.prem_city' },
        { data: 'properties.prem_zip' }
       ],

My geojson record looks like:

{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[-118.3,34.06166]},"properties":{"id":900276,"lic_app":"LIC","class_label":"Non-Retail","type":"12","status":"ACTIVE","dba":"JINRO AMERICA INC","prem_st_1":"3470 WILSHIRE BLVD","prem_city":"LOS ANGELES","prem_zip":"90010"}
}]}

The json that was working before adding the 'properties.' option looked like this (different record):

{"data":[{"lic_app":"LIC","class_label":"Non-Retail","type":"12","status":"ACTIVE","dba":"JINRO AMERICA INC","prem_st_1":"3470 WILSHIRE BLVD","prem_city":"LOS ANGELES","prem_zip":"90010"}]}

kthorngren

Here is your geojson:

{
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [-118.3, 34.06166]
        },
        "properties": {
            "id": 900276,
            "lic_app": "LIC",
            "class_label": "Non-Retail",
            "type": "12",
            "status": "ACTIVE",
            "dba": "JINRO AMERICA INC",
            "prem_st_1": "3470 WILSHIRE BLVD",
            "prem_city": "LOS ANGELES",
            "prem_zip": "90010"
        }
    }]
}

properties is in the features object. Since you are not returning a data object, which Datatables looks for by default, the data is not being read by Datatables. You will need to use the ajax.dataSrc to change the default from data to features. Here is an example:

$('#psLicense').DataTable({
  ajax: {
    url:'path/to/file/name/file.geojson',
    dataSrc: 'features`
  },

Leave your columns definition as is. I think this should get you going.

Kevin

enjoypb

Thank you very much. I'm now able to load the geojson. That worked great.

My challenge now is getting my datatables data to appear on my leaflet map on the same page.