File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
    <head>
        <link href="//datatables.net/download/build/nightly/jquery.dataTables.css" rel="stylesheet" type="text/css" />
  
        <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="//datatables.net/download/build/nightly/jquery.dataTables.js"></script>
​
        <meta charset=utf-8 />
        <title>DataTables - JS Bin</title>
    </head>
    <body>
        <div class="container">
            <table id="example" class="display" width="100%">
            </table>
        </div>
    </body>
</html>
CSSSaved
 
body {
    font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #fff;
}
​
​
div.container {
    min-width: 980px;
    margin: 0 auto;
}
​
​
JavaScriptSaved
 
var GeoJSON = JSON.stringify({
    "type": "FeatureCollection",
    "totalFeatures": 2,
    "features": [{
                "type": "Feature",
                "id": "agents.8264",
                "geometry": {
                    "type": "Point",
                    "coordinates": [-105.836835, 46.408539]
                },
                "geometry_name": "geom",
                "properties": {
                    "st_agent_c": "261312",
                    "state_sf_c": "26",
                    "agent_code": "1312",
                    "name": "Fred Wambolt",
                    "pref_name": "Some Guy",
                    "latitude": 46.408539,
                    "longitude": -105.836835
                }
            },
            {
                "type": "Feature",
                "id": "agents.8280",
                "geometry": {
                    "type": "Point",
                    "coordinates": [-105.824864, 46.401097]
                },
                "geometry_name": "geom ",
                "properties": {
                    "st_agent_c": "261352",
                    "state_sf_c": "26",
                    "agent_code": "1352",
                    "name": "Jerry Seinfeld",
                    "pref_name": "Fusilli Jerry",
                    "latitude": 46.401097,
                    "longitude": -105.824864
                }
            }
        ]
​
        ,
    "crs": {
        "type": "name",
        "properties": {
            "name": "urn:ogc:def:crs:EPSG::4326"
        }
    }
});
​
​
​
$(document).ready(function() {
​
  var columns = [];
  data = JSON.parse(GeoJSON);
  //console.log(data);
  columnNames = Object.keys(data.features[0]);  //get columns under features
  //console.log(columnNames);
  for (var i in columnNames) {
    if (Object.getPrototypeOf( data.features[0][columnNames[i]] ) === Object.prototype) {  //if column is object loop to get all nested column names
      var nested = Object.keys(data.features[0][columnNames[i]]);
      for (var j in nested) {  //column data is object name + nested name, example geometry.type
        columns.push({data: columnNames[i] + '.' + nested[j], title: columnNames[i] + '.' + nested[j]}); 
      }
    } else {   //otherwise the data is just the name
      columns.push({data: columnNames[i], title: columnNames[i]});
    }
  }
  //console.log(columns);
  //console.log(data.features);
  $('#example').DataTable( {
    data: data.features,   //get the data under features
    columns: columns
    } );
​
  
} );
2 warnings
Line 40: Bad line breaking before ','.
Line 42: Comma warnings can be turned off with 'laxcomma'.
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers