accessing data from a multidimensional array

lucasmarx

I have this Json:

{
  "clientes": [
    {
      "codigo": "1",
      "razao": "Dicon Contabilidade Ltda",
      "registro": "50.016.823/0001-83",
      "fiscal": null,
      "contabil": null,
      "dp": null
    },
    {
      "codigo": "2",
      "razao": "B Rosa Nunes",
      "registro": "65.996.787/0001-39",
      "fiscal": null,
      "contabil": null,
      "dp": null
    },
    {
      "codigo": "3",
      "razao": "M & R Comercio De Pneus Ltda",
      "registro": "16.982.372/0001-09",
      "fiscal": null,
      "contabil": null,
      "dp": null
    },
    {
      "codigo": "4",
      "razao": "Dicon Administracao Ltda",
      "registro": "05.503.601/0001-30",
      "fiscal": null,
      "contabil": null,
      "dp": null
    },
    {
      "codigo": "5",
      "razao": "T H R Marcelino Conveniencia E Lanchonete",
      "registro": "08.902.847/0001-73",
      "fiscal": null,
      "contabil": null,
      "dp": null
    },
    {
      "codigo": "6",
      "razao": "Manuel Bernardo Da Silva Neto",
      "registro": "05.962.291/0001-12",
      "fiscal": "Aline",
      "contabil": "Augusto",
      "dp": "Rosilene"
    },
    {
      "codigo": "7",
      "razao": "Michel Dantas & Dantas Ltda",
      "registro": "04.954.505/0001-46",
      "fiscal": null,
      "contabil": null,
      "dp": null
    }
  ],
  "fiscal": [
    "Adriele",
    "Aline",
    "Bruna",
    "Mariana",
    "Celso",
    "Crislene",
    "Douglas"
  ],
  "contabil": [
    "Ana",
    "Augusto",
    "Caroline",
    "Célia",
    "Danielle",
    "Guilherme",
    "Jessica"
  ],
  "dp": [
    "Brenda",
    "Guilherme",
    "Jessica",
    "Julio",
    "Pedro"
  ]
}

I'm struggling to get that into an datatable where the first 3 rows come from the array of objects and the other 3 to be an dropdown with the list of the values of the other arrays. Here's what I have on the columns of the datatable:

columns: [
        { data: "clientes.codigo" },
        { data: "clientes.razao" },
        { data: "clientes.registro"},
        { data: "fiscal",
          className: "text-center",
          render: function(data, type, full, meta){
            var retorno = '<select><option>'+data+'</option></select>'
            return retorno;
          }
        },
        { data: "contabil",
          className: "text-center",
          render: function(data, type, row, meta){
            var retorno = '<select><option>'+data+'</option></select>'
            return retorno;
          }
        },
        { data: "dp",
          className: "text-center",
          render: function(data, type, row, meta){
            var retorno = '<select><option>'+data+'</option></select>'
            return retorno;
          }
        }
    ],

With that I get nothing rendered, what am I doing wrong?

kthorngren

For the row data Datatables expects an array of rows (either array or objects) which you have. Assuming you are using the ajax option to fetch the data you will need to use the ajax.dataSrc option to define the location of the data in the JSON, ie, clientes. Next you will need to change your columns.data option to match the structure of the object clientes. Something like this:

ajax: {
  url: 'myurl',
  dataSrc: 'clientes`
},
columns: [
        { data: "codigo" },
        { data: "razao" },
        { data: "registro"},
        { data: "fiscal"},
        { data: "contabil"},
        { data: "dp"}
    ],

This should populate the Datatable.

To use the fiscal, contabil, dp object for the column select lists I would recommend using createdRow instead of columns.render. In createdRow you have access to the Datatables API which will allow for using ajax.json() to get the JSON response.

    createdRow: function ( row, data ) {
      var api = this.api();
      var jsonData = api.ajax.json();
      // process the jsonData to build the selects for the iscal, contabil, dp columns.
    }

Dataables does not control the selects so you can use standard Javascript processes to build the select HTML.

Kevin

lucasmarx

Thanks for the help, Kevin!

for the first part ok, I've set the datasrc and now i have the first three columns populated with what I want.
But for the second part (the three other columns with an select based on the arrays) I didn't get how it will work. Sorry, I dont have that much of experience working with this.

allan

You need to be really careful using select elements inside a DataTable (to the point that I would suggest you don't do it - if you need it to be editable, use inline editing like Editor does). The main reason for this is that sorting and search is really difficult with live DOM elements such as select.

However, if you do need to use it, then as Kevin says, createdRow or columns.createdCell is probably the way to go.

You would need to use a loop to create the select and then select the correct one based off the value for the cell (columns.createdCell is probably the callback I'd use).

Allan