Unable to show data from Ajax request

Unable to show data from Ajax request

FM2FM2 Posts: 4Questions: 1Answers: 0

Hi, I'm using the server-side processing for create a dynamic DataTable. However I received this error
(DataTables warning: table id=mytable - Requested unknown parameter '1' for row 0, column 1. For more information about this error, please see http://datatables.net/tn/4(

My Html is that

<head >
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/plug-ins/f2c75b7247b/integration/bootstrap/3/dataTables.bootstrap.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/1.0.4/css/dataTables.responsive.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />

  

</head>

<body>
    <h2>Responsive Table with DataTables</h2>

    <div class="container">
      <div class="row">
        <div class="col-xs-12">
          <table id="mytable">
           <thead>
              <tr>
                <th>Id</th>
                <th>Azienda</th>
                <th>Appezzamento</th>
                <th>Rilevatore</th>
                <th>Rilievio</th>
                <th>Caricamento</th>  
                <th>Azione</th>  
              </tr>
            </thead>
          </table>
        </div>
      </div>
    </div>
    
   <script  src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script  src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <script  src="https://cdn.datatables.net/plug-ins/f2c75b7247b/integration/bootstrap/3/dataTables.bootstrap.js"></script>
    <script  src="https://cdn.datatables.net/responsive/1.0.4/js/dataTables.responsive.js"></script>
    <script  src="./script.js"></script>

</body>

This is the response of my rest api

{
  "response": {
    "code": "200",
    "message": "La richiesta e' stata elaborata correttamente.",
    "request_type": "post",
    "browser": "Unidentified User Agent",
    "platform": "Unknown Platform",
    "ip": "xx.xx.xx"
  },
  "data": "{\"draw\":1,\"recordsTotal\":13,\"recordsFiltered\":13,\"data\":[{\"id\":\"198\",\"azienda\":\"Milano\",\"appezzamento\":\"VITE06\",\"rilevatore\":\"Mario Rossi\",\"rilievo\":\"2019-08-22\",\"caricamento\":\"2019-10-14\",\"azione\":\"Vedi"},{\"id\":\"199\",\"azienda\":\"199\",\"appezzamento\":\"VITE06\",\"rilevatore\":\"Mario Rossi\",\"rilievo\":\"2019-08-16\",\"caricamento\":\"2019-10-14\",\"azione\":\"Vedi\"}]}"
}

so my Ajax request is the following:

$('#mytable').DataTable( {
        "responsive": true,
        "pageLength" : 10,
        "processing": true,
        "serverSide": true,
        "ajax": {
            url: '',
            type : 'POST',
            data:{
                keys: '',
                from: '',
                where: '',
          
            },
            
        "columns": [
            { "data": "id" },
            { "data": "azienda" },
            { "data": "appezzamento" },
            { "data": "rilevatore" },
            { "data": "rilievo" },
            { "data": "caricamento" },
            { "data": "azione" }
        ],
        "dataSrc":function (json){
            json_data = JSON.stringify(JSON.parse(json.data))
            return json_data;
             }
        }} );

If I check the data on the console, the response is equal to the demo example. Where am I doing wrong?
any help is appreciated. I also tried to write the answer as a data array, but even in that case it doesn't work.

This question has an accepted answers - jump to answer

Answers

  • lthammlthamm Posts: 13Questions: 2Answers: 0
    edited March 2020

    Do you actually need the function within your dataSrc? You already seem to return json. So as per the doc https://datatables.net/reference/option/ajax.dataSrc it should be sufficient if you specify the string.

    Also to me it seems like your actual data is within data, data and not directly in data.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    The best place to start would be looking at the diagnostic suggestions in the link provided in the error message. Have you tried that?

    Colin

  • FM2FM2 Posts: 4Questions: 1Answers: 0

    Also changing the dataSrc: "data" It doesn't work. I read the diagnostic suggestions, but I still not find the error. It seems everything well formatted

  • lthammlthamm Posts: 13Questions: 2Answers: 0

    But isn't your table data an array within data? So just selecting "data" would not suffice.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    The default for ajax.dataSrc is data, so that wouldn't be needed. I suspect the problem is those backslashes - this thread here discusses a similar problem so that may help.

    Colin

  • FM2FM2 Posts: 4Questions: 1Answers: 0

    I removed the backslashes. But I still have the error Requested unknown parameter '0' for row 0, column 0.

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited March 2020 Answer ✓

    Your data response is not a valid JSON string. The escape quotes (\") indicate that your server script is JSON encapsulating the data twice. The second time is escaping the " with the backslash.

    Your Server Side response is not excepted to be inside a data object. Look at the Ajax tab of this Server Side example to see the expected response.

    One option is to change your rest API to just return the data in the expected structure.

    If you can't do that then you are on the right track of using ajax.dataSrc but you might need to use the xhr event instead. In the event you will need to remove the manipulate the json parameter to look like the expected response. Essentially you will need to JSON.parse() the data object. I think you will need:
    json = JSON.parse( JSON.data ); in the function.

    BTW, the ajax.dataSrc option is to be placed inside the ajax option. See the examples in the docs.

    Kevin

  • FM2FM2 Posts: 4Questions: 1Answers: 0

    Guys thank you for helping me. I solved in this way.
    Firstly I removed all backslashes. Secondly I changed the response of my rest API as follow:

    {
      "response": {
        "code": "200",
        "message": "",
        "request_type": "post",
        "browser": "Unidentified User Agent",
        "platform": "Unknown Platform",
        "ip": ""
      },
      "draw": 1,
      "recordsTotal": 10,
      "recordsFiltered": 10,
      "data": [
        {
          "id": ",
            ......
        }]
    }
    

    Finally I found a mistake in my request. I have written in the wrong place "columns".

This discussion has been closed.