JSON配列からテーブルを動的に構築する方法は？

Question

私はAJAX GET呼び出しをEnyoビューに配置しました。 GETは列ヘッダーを含むレコードの配列を返すWebサービスを呼び出します。

私の目的は、インデックス内に各ヘッダーの列と列が作成されるこの返された配列でテーブルを動的に構築することです。私はEnyoの面で知っています何

は、部品分野にAJAXレスポンスヘッダをマッピングすることによって、一つのレコードを作成することです：

 this.$.actionsTaken.setContent(inResponse.ActionsTaken); 

しかし、私は動的ことをして、作成するかどうかはわかりませんテーブルを飛ぶ。 （。ActionsTaken、ApplicationとEMがCOLヘッダである場合）

{ 
    ActionsTaken: "Tested uptime" 
    Application: "2011 Hanko" 
    EM: "EM102 " 
} 

質問：

方法例えばので

私は、Webサービスの応答を調べ、私のインデックス0は、以下が含まれています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