Can not Get Data from a remote json link

lahirulls · February 2018

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??

kthorngren · February 2018

It doesn't look like your data is in a valid JSON format. It looks like this:

{
    "result": {
        "count": "37859",
        "event": {
            "date": "-300",
            "description": "Pilgrims travel to the healing temples of Asclepieion to be cured of their ills. After a ritual purification the followers bring offerings or sacrifices.",
            "lang": "en",
            "category1": "By place",
            "category2": "Greece",
            "granularity": "year"
        },
        "event": {
            "date": "-300",
            "description": "Pyrrhus, the King of Epirus, is taken as a hostage to Egypt after the Battle of Ipsus and makes a diplomatic marriage with the princess Antigone, daughter of Ptolemy and Berenice.",
            "lang": "en",
            "category1": "By place",
            "category2": "Egypt",
            "granularity": "year"
        },
.....

You events object should be in an array. I think it should look more like this:

{
    "result": {
        "count": "37859",
              [
        "event": {
            "date": "-300",
            "description": "Pilgrims travel to the healing temples of Asclepieion to be cured of their ills. After a ritual purification the followers bring offerings or sacrifices.",
            "lang": "en",
            "category1": "By place",
            "category2": "Greece",
            "granularity": "year"
        },
        "event": {
            "date": "-300",
            "description": "Pyrrhus, the King of Epirus, is taken as a hostage to Egypt after the Battle of Ipsus and makes a diplomatic marriage with the princess Antigone, daughter of Ptolemy and Berenice.",
            "lang": "en",
            "category1": "By place",
            "category2": "Egypt",
            "granularity": "year"
        },
.....
           ]
      }
}

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 named data. Your data is in an object called results. You will need to use ajax.dataSrc to change the the data source to the results object.

Next you will need to change your column config. Datatables doesn't have an events option. To get the data from the events object you will need to configure Datatables similar to the above example. You will use columns.data to define your columns.

I think you will need something like this:

        $('#data-table').DataTable({
            "ajax"     :     {
                     "url": ""http://www.vizgr.org/historical-events/search.php?format=json&begin_date=-3000000&end_date=20151231&lang=en",
                     "dataSrc": "result"
             },
            "columns": [
                {"data": "event.date"},
                {"data": "event.description"},
                {"data": "event.lang"},
                {"data": "event.category1"},
                {"data": "event.category2"},
                {"data": "event.granularity"}
            ]
        });

The above should load your data once you get the events object into an array.

Kevin

lahirulls · February 2018

Thanks for the information it looks like i need to parse the JSON first.

Can not Get Data from a remote json link

Can not Get Data from a remote json link

Answers

Howdy, Stranger!

Categories

DataTables

Can not Get Data from a remote json link

Can not Get Data from a remote json link

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables