How to Pass geojson array to datatable dyanamically using javascript
I want to pass one geojson file to dynamically created datatable using javascript,I am unable to identify column names in file..
I have tried this..
CODE
<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 File
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[
40.078125,
57.136239319177434
],
[
91.7578125,
58.99531118795094
]
]
}
}
]
}
The problem is actually the datafile, which is valid JSON but not the structure that datatable requires.
Solution 1 : Change the file to expected structure.
{
"data": [
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[
40.078125,
57.136239319177434
],
[
91.7578125,
58.99531118795094
]
]
}
}
]
}
]
}
Solution 2 : Use the dataSrc through which you can modify the ajax response before datatable uses it.
$('#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" }
]
});
Here what I’ve done is created a new object obj.
Working fiddle here : https://jsfiddle.net/ourqh9ts/
The problem might be that the GeoJSON is not an array but an object.
Try changing your column definitions with these:
"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" }
]
The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .
