Can not Get Data from a remote json link
Can not Get Data from a remote json link

Hi all,
I am new to we development and I do not have any experience on DataTables. I am trying to make a table using JSON dataset: http://www.vizgr.org/historical-events/search.php?format=json&begin_date=-3000000&end_date=20151231&lang=en
vizgr.org/historical-events/search.php?format=json&begin_date=-3000000&end_date=20151231&lang=en
here is the HTMAL CODE:
<!DOCTYPE html>
<html>
<head>
<title>Show JSON Dataset in a Table and Search</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/bs-3.3.5/jq-2.1.4,dt-1.10.8/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.8/datatables.min.js"></script>
</head>
<body>
<br /><br />
<div class="container">
<h1 align="center">Show JSON Dataset in a Table and Search</h1><br />
<table id="data-table" class="table table-bordered">
<thead>
<tr>
<th>Date</th>
<th>Description<!/th>
<th>Lang<!/th>
<th>Category1<!/th>
<th>Category2<!/th>
<th>Granularity<!/th>
</tr>
</thead>
</table>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#data-table').DataTable({
"ajax" : "http://www.vizgr.org/historical-events/search.php?format=json&begin_date=-3000000&end_date=20151231&lang=en",
"columns": [
{"event": "date"},
{"event": "description"},
{"event": "lang"},
{"event": "category1"},
{"event": "category2"},
{"event": "granularity"}
]
});
});
</script>
It does not work ca any one help. I think the problem is with the dataset??
This discussion has been closed.
Answers
It doesn't look like your data is in a valid JSON format. It looks like this:
You
events
object should be in an array. I think it should look more like this:Please see this doc for more details regarding the Datatables data formats that are supported:
https://datatables.net/manual/data/
This is an example of nested objects, which you have:
https://datatables.net/examples/ajax/objects_subarrays.html
Look at the
Ajax
tab for the example data response.Once you get the
events
into an array then you need to update your Datatables config. Datatables, by default, expects the table data in an objected nameddata
. Your data is in an object calledresults
. You will need to useajax.dataSrc
to change the the data source to theresults
object.Next you will need to change your column config. Datatables doesn't have an
events
option. To get the data from theevents
object you will need to configure Datatables similar to the above example. You will usecolumns.data
to define your columns.I think you will need something like this:
The above should load your data once you get the
events
object into an array.Kevin
Thanks for the information it looks like i need to parse the JSON first.