如何从 JSON 数组动态构建表？答案

【问题标题】：How to dynamically build a table from a JSON array?如何从 JSON 数组动态构建表？
【发布时间】：2016-07-20 23:22:19
【问题描述】：

我在 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",      },


        ]}

【问题讨论】：

标签： javascript cordova enyo

【解决方案1】：

根据所有数据的复杂性，您可以相当简单地做到这一点。遍历您的数组和每个对象，然后您可以遍历其键并使用其数据创建每一列。

类似：

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

【讨论】：