如何从 JSON 数组动态构建 table？
How to dynamically build a table from a JSON array?
我在 Enyo 视图中放置了一个 AJAX GET 调用。 GET 调用 Web 服务，其中 returns 包含列 headers.
的记录数组
我的目标是用这个返回的数组动态构建一个 table，其中为每个索引创建一行，为索引中的每个 header 创建列。
就 Enyo 而言，我所知道的是通过将 AJAX 响应 header 映射到组件字段来创建一条记录：
this.$.actionsTaken.setContent( inResponse.ActionsTaken);
但我不确定如何动态地并即时创建table。
因此，例如，当我检查 Web 服务响应时，我的索引 0 包含以下内容：（其中 ActionsTaken、Application 和 EM 是列 headers .)
{
ActionsTaken: "Tested uptime"
Application: "2011 Hanko"
EM: "EM102 "
}
问题：
如何从 JSON 数组动态构建 table？
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", },
]}
根据您所有数据的复杂程度，您可以相当简单地完成此操作。遍历您的数组和每个 object，然后您可以遍历其键并使用其数据创建每一列。
类似于：
for (var k in theObject) {
// make column k
// add theObject[k] to it
}
我认为问题在于您创建了与此示例数据匹配的命名组件，但不知道这些组件是否始终是相同的键？
有一种（enyo.DataTable，令人惊讶的是，我从未使用过）您可以改用。它允许您添加行（没有 headers），这样您就可以从所有 object 键中创建第一行，然后下一行就是这些键的数据。它派生自 DataRepeater，因此可能需要一些实现，例如使用 enyo.Collection 来存储数据，然后将 collection 设置为 DataTable。
另一个更接近您所拥有的选择是根据需要动态创建组件：
this.$.outage_table.createComponents([{...}]);
this.$.outage_table.render(); // need to re-render when dynamically adding components
我在 Enyo 视图中放置了一个 AJAX GET 调用。 GET 调用 Web 服务，其中 returns 包含列 headers.
的记录数组我的目标是用这个返回的数组动态构建一个 table，其中为每个索引创建一行，为索引中的每个 header 创建列。
就 Enyo 而言，我所知道的是通过将 AJAX 响应 header 映射到组件字段来创建一条记录：
this.$.actionsTaken.setContent( inResponse.ActionsTaken);
但我不确定如何动态地并即时创建table。
因此，例如，当我检查 Web 服务响应时，我的索引 0 包含以下内容：（其中 ActionsTaken、Application 和 EM 是列 headers .)
{
ActionsTaken: "Tested uptime"
Application: "2011 Hanko"
EM: "EM102 "
}
问题：
如何从 JSON 数组动态构建 table？
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", },
]}
根据您所有数据的复杂程度，您可以相当简单地完成此操作。遍历您的数组和每个 object，然后您可以遍历其键并使用其数据创建每一列。
类似于：
for (var k in theObject) {
// make column k
// add theObject[k] to it
}
我认为问题在于您创建了与此示例数据匹配的命名组件，但不知道这些组件是否始终是相同的键？
有一种（enyo.DataTable，令人惊讶的是，我从未使用过）您可以改用。它允许您添加行（没有 headers），这样您就可以从所有 object 键中创建第一行，然后下一行就是这些键的数据。它派生自 DataRepeater，因此可能需要一些实现，例如使用 enyo.Collection 来存储数据，然后将 collection 设置为 DataTable。
另一个更接近您所拥有的选择是根据需要动态创建组件：
this.$.outage_table.createComponents([{...}]);
this.$.outage_table.render(); // need to re-render when dynamically adding components