[英]How to dynamically build a table from a JSON array?
我已经在Enyo视图中放置了一个AJAX GET调用。 GET调用Web服务,该服务返回包含列标题的记录数组。
我的目标是使用返回的数组动态构建表,其中为每个索引创建一行,为索引内的每个标头创建一列。
我对Enyo的了解是通过将AJAX响应标头映射到组件字段来创建一条记录:
this.$.actionsTaken.setContent( inResponse.ActionsTaken);
但是我不确定如何动态地进行操作并动态创建表。
因此,例如,当我检查Web服务响应时,我的索引0包含以下内容:(其中ActionsTaken
, Application
和EM
是col标头。)
{
ActionsTaken: "Tested uptime"
Application: "2011 Hanko"
EM: "EM102 "
}
题:
如何从JSON数组动态构建表?
AJAX GET:
fetch: function() {
var ajax = new enyo.Ajax({
url: "http://testservice.net/WebService/GetHistory",
async: false,
handleAs:"json",
xhrFields: {withCredentials: true}
});
ajax.go(this.data);
ajax.response(this, "gotResponse");
ajax.error(this, function(inSender, inError) {
Misc.hideMask();
ViewLibrary.back();
Misc.showToast("Error retrieving data");
});
},
gotResponse: function(inSender, inResponse)
{
var debugVar = inResponse;
this.$.actionsTaken.setContent( inResponse.ActionsTaken);
this.$.configurationItemLogicalName_value.setContent( inResponse.Application);
this.$.eM.setContent( inResponse.EM);
},
包含数据值的组件:
{name:"outage_table", kind: "FittableRows",components:[
{content: "Actions Taken", name: "actionsTaken", },
{content: "Application", name: "application", },
{content: "EM", name: "eM", },
]}
根据所有数据的复杂性,您可能可以相当简单地完成此操作。 遍历数组和每个对象,然后可以遍历其键并使用其数据创建每一列。
就像是:
for (var k in theObject) {
// make column k
// add theObject[k] to it
}
我认为问题在于您已经创建了与该示例数据匹配的命名组件,但是不知道这些组件将始终是相同的键吗?
您可能会使用一种(enyo.DataTable,我从未使用过)。 它使您可以添加行(无标题),以便从所有对象键中创建第一行,然后下一行是这些键的数据。 它是从DataRepeater派生的,因此可能需要进行一些实现,例如使用enyo.Collection存储数据,然后将集合设置为DataTable。
另一个更接近于您的替代方法是根据需要动态创建组件:
this.$.outage_table.createComponents([{...}]);
this.$.outage_table.render(); // need to re-render when dynamically adding components
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.