Invalid JSON response Jquery Datatables

Question

im trying to to make use of the datatables but when is supossed to draw the table the response is:

DataTables warning: table id=tablaSucursales - Requested unknown parameter '0' for row 0, column 0

And it appears two times

My object response is like this

{
    Mensaje: "OK"
    "Data": [
        {
            "Id_Sucursal": 510001,
            "Nombre_Sucursal": "Pedestal Prueba",
            "Estado": "CDMX",
            "Activa": 0
        },
        {
            "Id_Sucursal": 510010,
            "Nombre_Sucursal": "Tableta de Pruebas",
            "Estado": "CDMX",
            "Activa": 0
        },
    ]
}

My ajax request and datatables initialization is like this

$.ajax({
        url: './Archivos_Ajax.asp',
        method: "POST",
        dataType: 'json',
        data: { accion: "ObtenerSucursales",
                PageNumber: 1,
                RowsOfPage: 20 },
        success: function (response) {
      
            $('#tablaSucursales').DataTable( {
                // "processing": true,
                // "serverSide": true,
                data: response.Data,
                // search: {
                //  return: true
                // },
                columns: [
                    {title: "Id_Sucursal" },
                    {title: "Nombre_Sucursal"},
                    {title: "Estado"},
                    {title: "Activa"}
                ]
            } );

        }
    });

I already validate the Data object with https://jsonlint.com/

Any help would be awesome

Check the documentation: you are using columns.title. You need to use columns.data. And if you have trouble finding those references for yourself, then start by looking at the examples - especially the Ajax examples - and the one which uses JSON data objects, the same as your data source. — andrewJames
– andrewJames, Commented Sep 14, 2021 at 18:40
Also use data with a lower case "d" not upper case in your array. — mark_b
– mark_b, Commented Sep 15, 2021 at 9:27

BeerusDev · Accepted Answer · 2021-09-14 17:25:16Z

From the data format you have provided, please see the changes I have made to your column definitions/initializations. It should be as follows:

$.ajax({
        url: './Archivos_Ajax.asp',
        method: "POST",
        dataType: 'json',
        data: { accion: "ObtenerSucursales",
                PageNumber: 1,
                RowsOfPage: 20 },
        success: function (response) {
      
            $('#tablaSucursales').DataTable( {
                // "processing": true,
                // "serverSide": true,
                data: response.Data,
                // search: {
                //  return: true
                // },
                columns: [
                    {"data" : "Data.Id_Sucursal" },
                    {"data" : "Data.Nombre_Sucursal"},
                    {"data" : "Data.Estado"},
                    {"data" : "Data.Activa"}
                ]
            } );

        }
    });

Bernhard Beatus · Accepted Answer · 2021-09-14 17:50:54Z

I did this example as a fiddle for you: https://jsfiddle.net/bogatyr77/g7ntd8rk/12/
JQuery:

$(document).ready(function() {
  var data = [{
      "Id_Sucursal": 510001,
      "Nombre_Sucursal": "Pedestal Prueba",
      "Estado": "CDMX",
      "Activa": 0
    },
    {
      "Id_Sucursal": 510010,
      "Nombre_Sucursal": "Tableta de Pruebas",
      "Estado": "CDMX",
      "Activa": 0
    },
  ];

  var json = data;
  $.ajax({
    url: '/echo/json/',
    dataType: 'json',
    type: 'POST',
    data: {
      data: json
    },
    success: function(data) {
      $('#lista_proiecte').DataTable({
        "data": json,
        "columns": [{
            "data": "Id_Sucursal"
          },
          {
            "data": "Nombre_Sucursal"
          },
          {
            "data": "Estado"
          },
          {
            "data": "Activa"
          }
        ]
      });
    }
  });
})

HTML:

<!--css plugins for table-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.min.css">


<!--js plugins for table-->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.min.js"></script>
<section class="container shadow">
  <div class="table-responsive">
    <table id="lista_proiecte" class="table table-striped table-hover">
      <thead>
        <tr>
          <th>Id_Sucursal</th>
          <th>Nombre_Sucursal</th>
          <th>Estado</th>
          <th>Activa</th>
        </tr>
      </thead>
    </table>
  </div>
</section>

Although this works in your example, the data variable you created is not mimicking the one OP is receiving from the AJAX request, so in OP case, it will not work. There is the response, then a nested array of objects within "Data", so Data.objKey needs to be called to actually init the column data ;)

Collectives™ on Stack Overflow

Invalid JSON response Jquery Datatables

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related