How will I create 2 datatables from 1 json file?

JCG

I'm using bootstrap framework.

Here's the json content:
[
{
"Issues(This week)":[
{
"category":"Sample Content",
"ruleName":"Sample Content",
"fileName":"Sample Content"
},
{
"category":"Sample Content",
"ruleName":"Sample Content",
"fileName":"Sample Content"
}
]
},
{
"Issues(Old)":[
{
"category":"Sample Content",
"ruleName":"Sample Content",
"fileName":"Sample Content"
}
]
}
]

---

Thank you.

sandy

Hi @JCG,

You can define a the data to use in the DataTable using data. Just pass in the data you want for each table.

Thanks,
Sandy

JCG

Hi @sandy,

Thank you for your fast response.
Here's the script I tried but I have 2 data source in my json file; The "Issues(This week)" and "Issues("Old"). So I need to show both.

 <!-- Created Script-->

<script>
$(document).ready(function() {
    $('#tableName').DataTable( {
    "scrollY":        "700px",
    "scrollX":        true,
    "scrollCollapse": true,
    "paging":         true,
        "ajax": {
            "url": "report.json",
            "dataSrc": "Issues(This week)"
        },
        "responsive": true,
        "columns": [
            { "data": "category","width":'10%'},
            { "data": "ruleName","width":'10%'},
            { "data": "fileName","width":'10%'}
        ],
        } );
    } );
</script>

I want to create 2 datatables but I dont know how will I create it from 1 external json file I have .Thank you in advance!

kthorngren

Use jQuery ajax() to fetch the data then in the success function initialize both Datatables using data to load the particular dataset. Here is a simple example:
http://live.datatables.net/kibunado/1/edit

Kevin

JCG

Hi @kthorngren,

Thank you for helping me with this.
I tried your code and I got this response.

After getting this error, I tried to change the " var data = JSON.parse(json);" to
// var data = JSON.stringify(json);" and here's the output.

Here's my json file content:

[
{
"Issues(This week)":[
{
"category":"Sample Content",
"ruleName":"Sample Content",
"fileName":"Sample Content"
},
{
"category":"Sample Content",
"ruleName":"Sample Content",
"fileName":"Sample Content"
}
]
},
{
"Issues(Old)":[
{
"category":"Sample Content",
"ruleName":"Sample Content",
"fileName":"Sample Content"
}
]
}

]

Then this is the script:

<script>
    $(document).ready( function () {

      function getData() {
        $.ajax({
          url: "report.json",
          success: function (json) {
            //parse JSON data
            var data = JSON.stringify(json);
            // var data = JSON.parse(json);

            $('#ScanReport-table-A').DataTable({
              data: data["Issues(This week)"]
            });


            $('#ScanReport-table-B').DataTable({
              data: data["Issues(Old)"]
            });        

          }
        });
      }

      getData();

    } );

</script>

---

Hope you can help me

colin

The data is in an array, so you need to do something like this: http://live.datatables.net/yupevowu/1/edit

Colin

JCG

Hi @colin,

Thank you for your response, your sample code works for me. But only when I input the json data in my script. My problem now is my data source is from external json file. Can you help me get the data from an external json file?. Thanks again

kthorngren

The first thing to do is verify what the JSON response is. Use the browser's network inspector tool to see what the response is. This technote provides the steps.

url: "report.json",

Is this a local file or a webserver? Due to security reasons web browsers aren't allowed to open local files. You will need to send the URL to a server that returns the file.

Kevin

JCG

Hi @kthorngren ,

I am using a webserver. I combined all your suggestions and came up with this output (please find the attached screenshot). I also include the response on the side. I don't know what I'm missing to show the data.

Here's my updated script:

<script>

$(document).ready( function () {

  function getData() {
    $.ajax({
      url: "report.json",
      success: function (json) {
        var data = JSON.stringify(json);


            $('#new').DataTable({
              "data": data[0]['Issues(This week)'],
                "columns": [
                    { "data": "category"},
                    { "data": "ruleName"},
                    { "data": "fileName"}
                ]
            });

            $('#old').DataTable({
              "data": data[0]["Issues(Old)"],
                "columns": [
                    { "data": "category"},
                    { "data": "ruleName"},
                    { "data": "fileName"}
                ]
            });       

           }
        });
      }

  getData();

} );

</script>

Thank you

kthorngren

Using var data = JSON.stringify(json); on the JSON response isn't going to work. First if the response is already a JSON string JSON.stringify(j) will just encapsulate that into another string. You are getting Unexpected token.... when using JSON.parse(). That means that either the JSON is not formatted correctly or that you don't need to use JSON.parse() and can use the data directly, ie, don't use JSON.parse() just use var data = json;.

The technote I linked to provides steps to test the JSON string using jsonlint.

Kevin

JCG

Hi @kthorngren,

I replaced the JSON.parse() to var data = json; and it worked .

Thank you so much for helping me,@kthorngren and @colin . You guys are really amazing!