Answers

• sandy Posts: 913Questions: 0Answers: 236

  June 2020

  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 Posts: 6Questions: 1Answers: 0

  June 2020

  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 Posts: 21,341Questions: 26Answers: 4,954

  June 2020 Answer ✓

  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 Posts: 6Questions: 1Answers: 0

  June 2020

  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 Posts: 15,240Questions: 1Answers: 2,599

  June 2020 Answer ✓

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

  Colin
• JCG Posts: 6Questions: 1Answers: 0

  June 2020

  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 Posts: 21,341Questions: 26Answers: 4,954

  June 2020

  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 Posts: 6Questions: 1Answers: 0

  June 2020

  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 Posts: 21,341Questions: 26Answers: 4,954

  June 2020 Answer ✓

  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 Posts: 6Questions: 1Answers: 0

  June 2020

  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!