如何從JSON數組動態構建表？

Question

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


        ]}

Answer 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