How load json data on table using datatables?

Question

I'm trying load json data on table using datatables

The return of json from php is like this:

data = {
  "CLIENTES": {
    "0": {
      "ID": "1",
      "NOME": 'GABRIEL'
    },
    "1": {
      "ID": "2",
      "NOME": 'RODRIGUES'
    }
  }
}

In the documentation columns data they say that I need to follow this structure:

table.DataTable({
  "ajax": url,
  columns: [
    {"data": "CLIENTES.ID"},
    {"data": "CLIENTES.NOME"}
  ]
});

But dont work, and we know that the right acess to de data index is this way:

{"data": "CLIENTES['0'].ID"},
{"data": "CLIENTES['1'].ID"},

But need's to be dynamically, how can I do this?

CMedina · Accepted Answer · 2016-02-25 14:53:37Z

1

You should create new data for datatable without CLIENTES .... map is an option.

  $(document).ready(function() {
    data = {
      "CLIENTES": {
        "0": {
           "ID": "1",
           "NOME": 'GABRIEL'
        },
       "1": {
           "ID": "2",
           "NOME": 'RODRIGUES'
         }
       }
     };


   var newData = $.map(data.CLIENTES, function(el) { return el });

   $('#example').DataTable({
       data: newData,
       columns: [
       {"data": "ID"},
       {"data": "NOME"}
       ]
    });

  });

example: https://jsfiddle.net/cmedina/7kfmyw6x/5/

answered Feb 25, 2016 at 14:53

CMedina

4,2824 gold badges28 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ggilberth Over a year ago

This is a good answer if you haven't got say over what data you receive, but if you do then sending through only the required data is a much better approach.

ggilberth · Accepted Answer · 2016-02-25 13:26:54Z

0

If you remove the 'CLIENTES' outer array and only return an array of the results in your PHP, you will be able to refer to the values like this:

    table.DataTable({
        "ajax": url,
        columns: [
          {"data": "ID"},
          {"data": "NOME"}
        ]
    });

answered Feb 25, 2016 at 13:26

ggilberth

1,14810 silver badges19 bronze badges

Comments

NachoDawg · Accepted Answer · 2016-02-25 13:34:55Z

0

you can do things to an object dynamically by using for var in

var myArray = [] //an  empty array

for(var i in data){
    myData.push({"data": "CLIENTES[i].ID"})
    myData.push({"data": "CLIENTES[i].NOME"})        
}

then later you can do this

table.DataTable({
    "ajax": url,
    columns: myArray
});

but I suspect the way you write {"data": "CLIENTES[i].ID"} is wrong, though i havent used datatables before.

maybe something like this is more correct? it's how you usually get to object properties

for(var i in data){
    myData.push({"data": data.CLIENTES[i].ID})
    myData.push({"data": data.CLIENTES[i].NOME})        
}

answered Feb 25, 2016 at 13:34

NachoDawg

1,55412 silver badges22 bronze badges

Collectives™ on Stack Overflow

How load json data on table using datatables?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related