如何使每个参数出现在 table 行中？

Question

我有一个设备可以通过 REST API 获取一些遥测数据。它收到的一些数据采用以下格式：

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

我想做的是通过以下方式可视化数据：

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

现在，如果我分解每个参数并将其分别发送到设备，它将覆盖前一个参数。我该怎么做？

Answer 1

想出了一个方法来做到这一点：

转到 'Widget Bundle' 并创建一个新的小部件包。
创建类型为 'Latest values' 的新小部件。
这里有 CSS/HTML 部分和 Javascript 部分。

HTML 部分：

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

Javascript 节：

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();
}

您需要注意和了解的是self.ctx.defaultSubscription.data，当您使用某个小部件可视化您的数据时，您将数据订阅到该小部件。 self.ctx.defaultSubscription.data 授予您访问数据的权限，您可以 console.log() 查看它的结构。

self.defaultList 用于预览，当您将此小部件设置为特定数据时，它将使用该数据。

可能还有其他方法可以做到这一点，但我就是这样做的。

如何使每个参数出现在 table 行中？

How to make each parameter appear in a table row?

thingsboard