Datatables.net json data load

Question

I am trying to load the below json data into Datatables, but I'm facing error. My web browser(chrome) successfully downloads the data, but it does not represent the data. The table shows only the name of columns but nothing. Can someone please help me?

{
  "type": "FeatureCollection",
  "features": [
{
  "type": "Feature",
  "properties": {
    "Feature_ID": "4",
    "Clean_Feature_Name": "Abalos Colles",
    "Feature_Type": "Collis, colles",
    "Feature_Type_Code": "CO",
    "title": "['Arecibo radar imagery of Mars: II. Chryse-Xanthe, polar caps, and other regions']",
    "author": "['Harmon, John K.', 'Nolan, Michael C.']",
    "year": 2017,
    "bibcode": "2017Icar..281..162H",
    "pub": "Icarus"
  }
 }
]
}

And below is my javascript code.

$(document).ready(function() {
 $('#example').DataTable( {
  "ajax" : {
    "url" : "http://212.201.46.76/data_final/sample_paper.json",
  },
  "columns" : [
    { "features" : "properties.Feature_Id" },
    { "features" : "properties.Clean_Feature_Name" },
    { "features" : "properties.Feature_Type" },
    { "features" : "properties.Feature_Type_Code" },
    { "features" : "properties.title" },
    { "features" : "properties.author" },
    { "features" : "properties.year" },
    { "features" : "properties.bibcode" },
    { "features" : "properties.pub" },
  ]
  } );
 } );

My HTML code

    <body>
  <button id="reload">Reload</button>
    <div class="container">
        <table id="example" class="display" width="100%">
            <thead>
                <tr>
        <th>Feature_ID</th>
        <th>Clean_Feature_Name</th>
        <th>Feature_Type</th>
        <th>Feature_Type_Code</th>
        <th>Bibcode</th>
        <th>Title</th>
        <th>Author</th>
        <th>Year</th>
        <th>Pub</th>                    
              </tr>
            </thead>

            <tfoot>
                <tr>
        <th>Feature_ID</th>
        <th>Clean_Feature_Name</th>
        <th>Feature_Type</th>
        <th>Feature_Type_Code</th>
        <th>Bibcode</th>
        <th>Title</th>
        <th>Author</th>
        <th>Year</th>
        <th>Pub</th>                    
                </tr>
            </tfoot>
        </table>
    </div>
</body>

score 1 · Answer 1 · answered Apr 22 '18 at 21:33

You're specifying your columns array wrong.

The columns array is where you specify a number of options in your table, on a per-column basis. There is no features option available; presumably that's why you're not seeing a table. Available values are here.

Now, you should be able to simply do this:

$(document).ready(function() {
  $('#example').DataTable( {
    "ajax" : {
      "url" : "http://212.201.46.76/data_final/sample_paper.json",
    }
  });
});

as in this example (which you probably used to get started), removing your columns definition entirely. You've already specified the columns using HTML. If you need different options from the example, you need to learn to use columns correctly.

For more information on this, see this post.

thanks, helped me to get a hint though it was not exactly correct — Jaeho Shin, Apr 23 '18 at 11:53

Jaeho Shin · Answer 2 · 2018-04-23T12:14:00.400

1

Finally I found a solution. This is how you do when the json file has different format with examples.

"dataSrc" <-- follow your json format

{ "data" : "properties.title"} <-- "data" is always "data' it's a fixed key. you should not change it whatever "dataSrc" is.

$(document).ready(function() {
  $('#example').DataTable( {
    "processing": true,
    "ajax" : {
      "url": "http://212.201.46.76/data_final/sample_paper.json",
      "dataSrc": "features"
    },
    "columns": [
        { "data" : "properties.title" },
        { "data" : "properties.author" },
        { "data" : "properties.year" },
        { "data" : "properties.bibcode" },
        { "data" : "properties.pub" }
    ] 
  });

edited Apr 23 '18 at 12:14

answered Apr 23 '18 at 11:56

Jaeho Shin

85
1
7

1

"JSON file has different format from examples." Must have been a secret. At least, you didn't mention that in your question. :) Anyway, I'm glad my answer gave you a hint, and thanks for posting your solution. Yes, if the data you are looking for is nested in a "features" node, you'll have to specify "dataSrc" as you have done it here. – BobRodes Apr 24 '18 at 00:42

Datatables.net json data load

2 Answers2

Linked