CODEWITHSUNDEEP
javascriptjqueryjsondatatables
Jaeho Shin
Jaeho Shin

Reputation: 115

Datatables.net json data load

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>

Upvotes: 0

Views: 155

Answers (2)

Jaeho Shin
Jaeho Shin

Reputation: 115

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" }
    ] 
  });

Upvotes: 1

BobRodes
BobRodes

Reputation: 6165

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.

Upvotes: 1

Related Questions