How to make each parameter appear in a table row?

Question

I have a device that get some telemetry data via REST API. Some of the data that it received is in the following format:

{
    ...
    parameters: [
        {
            'name': 'parameter1',
            'grade': '2',
            'info': 'some informtion'
        },
        {
            'name': 'parameter2',
            'grade': '1',
            'info': 'some informtion'
        },
        ...
    ]
}

what I want to do is to visualize the data in the following way:

     name    | grade | info
---------------------------------------
 parameter1  |   2   | some information
 parameter2  |   1   | some information
    ...      |  ...  |       ...

now if I break down each parameter and send it to the device separately it will override the previous one. How can I make that?

Answer 1

Figured out a way to do this:

1. Go to 'Widget Bundle' and create a new widget bundle.
2. Create a new widget of type 'Latest values'.
3. Here we have CSS/HTML section and a Javascript section.

HTML section:

<div class="my-data-table">
</div>

Javascript section:

self.defaultList = [
    {
        'id': 1,
        'name': 'name 1', 
        'grade': 123, 
        'description': 'This is a description'
    },
    {
        'id': 2,
        'name': 'name 2', 
        'grade': 456, 
        'description': 'More description'
    }, 
    {
        'id': 3,
        'name': 'name 3', 
        'grade': 789, 
        'description': 'Even more description'
    }
];

self.createTable = function(data) {
    const columnNames = Object.keys(data[0]);
    let tableHeadContent = $('<tr></tr>');
    columnNames.forEach((columName) => {
        tableHeadContent.append('<td>' + columName + '</td>');
    });
    let tableHead = $('<thead></thead>').append(tableHeadContent);
    let tableBody = $('<tbody></tbody>');
    
    data.forEach((currentElement, index) => {
        const vals = Object.values(currentElement);
        let currentRow = $('<tr></tr>');
        vals.forEach((val) => {
           currentRow.append('<td>' + val + '</td>');
        });
        tableBody.append(currentRow);
    });
    return $('<table></table>').append(tableHead).append(tableBody);
}

self.onInit = function() {
    let currentList = [...self.defaultList];
    if(self.ctx.defaultSubscription.data[0].data.length !== 0) {
        currentList = JSON.parse(self.ctx.defaultSubscription.data[0].data[0][1]);
    }
    let currentTable = self.createTable(currentList);
    $('.my-data-table', self.ctx.$container).append(currentTable);
}

self.onDataUpdated = function() {
        self.ctx.detectChanges();
}

What you need to pay attention to and understand is self.ctx.defaultSubscription.data, when you visualize your data with a certain widget you subscribe the data to the widget. self.ctx.defaultSubscription.data give you access to the data, you can console.log() it to see how it is structured.

The self.defaultList is for the preview and when you set this widget to a specific data it will use that data.

There may be other way to do this but this is how I did it.