Invalid JSON response

cleyfe

I am trying to display JSON data in a datatable but end up with the error 1: Warning: Invalid JSON response. I have followed the diagnostic in the help page (here), but I can't find to resolve the issue.

I noticed that my AJAX response returns the complete html code of the page instead of returning the data as it should, may this be the starting point to resolve the problem?

My code is as below:

<table id="dataTable" class="table table-bordered table-hover" width="100%" cellspacing="0">
     <thead>
        <tr>
             <th>Financial goal</th>
             <th>January</th>
             <th>February</th>
             <th>March</th>
             <th>April</th>
             <th>May</th>
             <th>June</th>
             <th>July</th>
             <th>August</th>
             <th>September</th>
             <th>October</th>
             <th>November</th>
             <th>December</th>
        </tr>
     </thead>
</table>

    <script>
      var Tdata = []
      var endpoint = '/api/data/'

      $.ajax({
        method: "GET",
        url: endpoint,
        success: function(dict){
          Tdata = dict['{{ project.model_name }}']['table_data']
          //console.log(Tdata)
          //settable()
        },
      })

      $(document).ready(function() {
        $('#dataTable').DataTable({
          "ajax": Tdata
          } 
        });
      });
    </script>

Many thanks in advance for your help.

kthorngren

I noticed that my AJAX response returns the complete html code of the page instead of returning the data as it should, may this be the starting point to resolve the problem?

Yes, start by looking at your server script to determine why its returning the HTML.

Kevin

cleyfe

Hello, thanks for the answer but I couldn't find the answer. Would it be something with how I compute my data to be included in the table?

def get_tabledata(project_id):
    objectives = Objective.objects.all().filter(project=project_id)
    table_data = {}
    data = []
    for obj in objectives:
        line = [int(obj.amount)*2 for i in range(12)]
        line.insert(0, obj.title)
        data.append(line)

    table_data = {'data':data}
    print(table_data)
    return table_data

The variable "table_data" is the matrix I would like to include in the datatable. Does that help?

kthorngren

The variable "table_data" is the matrix I would like to include in the datatable. Does that help?

Not really. Code snippets don't usually help us to understand what is happening. That looks like Python code but not sure. You will need to follow/debug your server code to follow what is happening when it receives the Ajax request.

Once you get the response to be correct then you will need to make some changes in your Javascript. The "ajax": Tdata you have is not correct. The ajax option is expecting a URL. If you want to add Javascript data you will use data instead. Also you will want the Datatables initialization inside the success function so it runs after the response. Something more like this:

      $.ajax({
        method: "GET",
        url: endpoint,
        success: function(dict){
          Tdata = dict['{{ project.model_name }}']['table_data']
          //console.log(Tdata)
          //settable()
          $('#dataTable').DataTable({
            "data": Tdata
            }
        },
      })

Kevin

cleyfe

Great, thanks for the answer. I will try that (PS: it is Python indeed)