Home » Jquery » jQuery DataTable create rows from nested JSON source

jQuery DataTable create rows from nested JSON source

Posted by: admin February 22, 2020 Leave a comment

Questions:

I’ve been struggling with some jQuery DataTable code in Angular 6 app.
To be short, I have a JSON object created dynamically in my .ts file, it looks like this :

[{
    "room": "azazazaz",
    "categories": [
      {
        "category": "bzbzbzbzbz",
        "device": [
          {
            "hostname": "czczczczc",
            "label": "dzdzdzdzdz",
            "domain": "ezezezezez",
            "drives": [{ "name": "C" }, { "name": "D" }],
            "os": "Windows"
          },
          {
            "hostname": "czczczczc",
            "label": "dzdzdzdzdz",
            "domain": "ezezezezez",
            "drives": [{ "name": "C" }, { "name": "D" }],
            "os": "Windows"
          }]
      }]
  }];

I want the DataTable to create a row for each device presents in the “Categories”.
I tried like this but I can only make it when specifying the index like :

$('#test').dataTable({
    "aaData": testdata,
        "columns": [{
        "mDataProp": "room"
    }, {
        "mDataProp": "categories.0.category"
    }, {
        "mDataProp": "categories.0.device.0.hostname"
    }, {
        "mDataProp": "categories.0.device.0.os"
    }, {
        "mDataProp": "categories.0.device.0.domain"
    }]
});

Any generic solution to avoid the use of index and make it totally automatic ?
FYI : the JSON object can be really huge.

Thanks

How to&Answer: