Trying Ajax JSON object method. Not building table. No errors

Trying Ajax JSON object method. Not building table. No errors

dimicheledimichele Posts: 1Questions: 1Answers: 0

Link to test case: http://madco.tech/test.html

Error messages shown: Alert = DataTables warning: table id=table_id - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1

Description of problem:

I'm new to DataTables.net.

Trying to use Ajax to read states.json file. Tried two methods (see code). Current method (using "ajax": mydata) object consolesout the object just fine. However, I get the alert above with no data displayed.

Followed all the instructions per the alert at the link http://datatables.net/tn/1. Everything was fine. Status 200 on everything.

Verified the JSON on JSON Lint. It was fine also.

My preferred method because I do not want to use all the columns in the database using the longer Ajax method using data: mydata and defining columns gave me numerous datatables.min.js errors. It's currently commented out.

Could not find this issue in the forums, examples, or manual.

FYI, if I use the server side method using PHP to get the data from the table all works as advertised. Would really like to do this local. This is for a mobile app and I would like to make the data available if the user is offline.

The code is pretty well commented and should be easy to figure out.

Thank you in advance!!!!!

Mike

Code:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script src="/js/jQuery.3.5.1.js"></script>
   <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css"/>
   <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.23/af-2.3.5/r-2.2.7/datatables.min.css"/>
   <script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.23/af-2.3.5/r-2.2.7/datatables.min.js"></script>
   <link rel="stylesheet" type="text/css" href="css/backend.css"/>
</head>
<body>

   <table id="table_id" class="display" style="width: 100%;">
      <thead>
         <tr>
               <th>Initials</th>
               <th>State</th>
               <th>Distance</th>
               <th>Adam Walsh</th>
               <th>Applies To</th>
               <th>Restictions</th>
               <th>Updated</th>
               <th>Flagged</th>  //Commented out when using long method below
               <th>ID</th>  //Commented out when using long method  below
         </tr>
      </thead>
      <tfoot>
         <tr>
            <th>Initials</th>
            <th>State</th>
            <th>Distance</th>
            <th>Adam Walsh</th>
            <th>Applies To</th>
            <th>Restictions</th>
            <th>Updated</th>
            <th>Flagged</th>  //Commented out when using long method  below
            <th>ID</th>  //Commented out when using long method  below
         </tr>
      </tfoot>
   </table>

<!-- Scripts -->
   <script>
      $(document).ready(function() {
         console.log('Document ready');

         /* Imports the local JSON file > mydata object */
         fetchJSONFile('states.json', function(mydata){
            
            console.log(mydata); // This works fine.  Object is browsable

            $('#table_id').DataTable( {

               "ajax": mydata  //Commented out when using long method below

               /* Long method */
               /* Tried Ajax method below, Shows many datatables.min.js errors */
               /* Prefer this method because I don't want to use all the columns in database */

               /* data: mydata,
               columns: [
                  { data: 'stateInitials' },
                  { data: 'stateName' },
                  { data: 'distance' },
                  { data: 'awa' },
                  { data: 'appliesTo' },
                  { data: 'restrictions' },
                  { data: 'asOfDate' },
               ] */

            });

         });
      });


      /* Function to fetch JSON file */
      function fetchJSONFile(path, callback) {
         var httpRequest = new XMLHttpRequest();
         httpRequest.onreadystatechange = function() {
            if (httpRequest.readyState === 4) {
                  if (httpRequest.status === 200) {
                     var data = JSON.parse(httpRequest.responseText);
                     if (callback) callback(data);
                  }
            }
         };
         httpRequest.open('GET', path);
         httpRequest.send(); 
      }
   </script>

</body>
</html>

Answers

  • kthorngrenkthorngren Posts: 11,404Questions: 25Answers: 2,640

    In your case using "ajax": mydata will try to fetch from the URL in the variable mydata. But mydata is not a URL thus the error.

    You have /* data: mydata, which is close. You need to point to the array of rows. Try using data: mydata.posts.

    I've never used httpRequest.send(). If its an async request you will need to use a callback to initialize Datatables. Otherwise datatables may initialize before the response populates the mydata variable. You will need to look at the docs for httpRequest.send().

    Kevin

Sign In or Register to comment.