如何使每个参数显示在表格行中

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

找到了一种方法：

1. 转到"Widget Bundle"并创建一个新的Widget Bundle
2. 创建一个类型为"Latest values"的新小部件
3. 这里我们有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用于预览，当您将此小部件设置为特定数据时，它将使用该数据。

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