[ Ask ] Displaying child objects

pekokFC

Hi all,
i have data returned from server as follows :

{
    "data": [
        {
            "name": "SU",
            "description": "Super User",
            "company_id": "system",
            "objects": [
                {
                    "id": "jyD1-zqI",
                    "label": "register-object",
                    "type": "form",
                    "description": "form register object"
                },
                {
                    "id": "Eg6sZMhI",
                    "label": "register-company",
                    "type": "form",
                    "description": "form register company"
                },
                {
                    "id": "_jtptOH8",
                    "label": "register-scope",
                    "type": "form",
                    "description": "form register scope or role"
                },
                {
                    "id": "u-hcugkc",
                    "label": "autorization",
                    "type": "api",
                    "description": "/auth/autorize"
                },
                {
                    "id": "dxdcvSv8",
                    "label": "register-user",
                    "type": "form",
                    "description": "form register user"
                }
            ]
        },
        {
            "name": "SU",
            "description": "Super User",
            "company_id": "system",
            "objects": [
                {
                    "id": "jyD1-zqI",
                    "label": "register-object",
                    "type": "form",
                    "description": "form register object"
                },
                {
                    "id": "Eg6sZMhI",
                    "label": "register-company",
                    "type": "form",
                    "description": "form register company"
                },
                {
                    "id": "_jtptOH8",
                    "label": "register-scope",
                    "type": "form",
                    "description": "form register scope or role"
                },
                {
                    "id": "u-hcugkc",
                    "label": "autorization",
                    "type": "api",
                    "description": "/auth/autorize"
                },
                {
                    "id": "dxdcvSv8",
                    "label": "register-user",
                    "type": "form",
                    "description": "form register user"
                }
            ]
        }
    ]
}

How can i display it as Row details ?

Thanks ~
Best Regards,
FR

kthorngren

Look at this example:
https://datatables.net/examples/api/row_details.html

I assume you are interested in showing the objects portion of your data as the row details. Since this is an array of objects you would need to process the array.

In the format function of the example the table is built using the data objects in the row, for example '<td>'+d.name+'</td>'+. Lets say you just want the id of first element in the objects array. You could use something like this '<td>'+d.objects[0].id+'</td>'+.

Or you could loop through the array to build the HTML table the way you want to display it.

If you need further help please provide more details of what you want displayed and how it should look.

Kevin

pekokFC

Hi Kevin,

This is the result :

I'm still unable to expand the objects. But i do return the table into the row.child property.

<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">
<tr>
<td>Label :</td>
<td>register-company</td>
</tr>

<tr>
<td>Description :</td>
<td>form register company</td>
</tr>

<tr>
<td>Type :</td>
<td>form</td>
</tr>
</table>

Here's my code, i'm using Typescript for Angular 4 :

formatChild(d) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
      '<tr>' +
      '<td>Label :</td>' +
      '<td>' + d.label + '</td>' +
      '</tr>' +
      '<tr>' +
      '<td>Description :</td>' +
      '<td>' + d.description + '</td>' +
      '</tr>' +
      '<tr>' +
      '<td>Type :</td>' +
      '<td>' + d.type + '</td>' +
      '</tr>' +
      '</table>';
  }

let childs = this.formatChild(this.result.data[1].objects[1]);

$('#meong').on('click', 'td.details-control', function () {
            const tr = $(this).closest('tr');
            const row = table.row( tr );

            if ( row.child.isShown() ) {
              // This row is already open - close it
              row.child.hide();
              tr.removeClass('shown');
            }
            else {
              // Open this row
              row.child( childs ).show();
              tr.addClass('shown');
            }
          } );

Any idea what i'm missing ?

kthorngren

I'm still unable to expand the objects. But i do return the table into the row.child property.

It doesn't look like you have setup the first column to provide the control to expand and close the details. Your td.details-control selector is not working. From the example the first column is setup like this:

        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },

Kevin

pekokFC

Hi Kevin,
i add those object to columns array but i got this error instead :

what's wrong with it ?

allan

Typically that error would happen if your thead, tbody and columns don't all match in terms of the number of columns that are defined for the DataTable.

Allan