ノックアウトobservableArrayで各オブジェクトのキーをループしてテーブルを動的に作成する方法は？

Question

私はobservableArrayを持っていますが、これは動的SQLデータによって生成されます。したがって、返される列はいつでも異なる場合があります。

SQL結果をHTMLテーブルに表示したいとします。しかし、以下は動作していません。

これは、私は、出力が... taskRecordOverviewのためのあなたのforeachループ内

var viewModel = function(data) { 
 
    var self = this; 
 
    
 
    // variables 
 
    self.taskRecordOverview = ko.observableArray([ 
 
    { 
 
     "Entity": "DEMO", 
 
     "Period": "2017-07-31T00:00:00", 
 
     "Level": "Level 3", 
 
     "Addendum Errors": null, 
 
     "Cash Process": "Created", 
 
     "Corporate Actions": null, 
 
     "Expenses": null 
 
    }, 
 
    { 
 
     "Entity": "DEMO", 
 
     "Period": "2017-07-31T00:00:00", 
 
     "Level": "Level 5", 
 
     "Addendum Errors": "Created", 
 
     "Cash Process": "Created", 
 
     "Corporate Actions": "Created", 
 
     "Expenses": "Created" 
 
    }, 
 
    { 
 
     "Entity": "SP00", 
 
     "Period": "2017-07-31T00:00:00", 
 
     "Level": "Level 5", 
 
     "Addendum Errors": "Created", 
 
     "Cash Process": "Approved", 
 
     "Corporate Actions": "Created", 
 
     "Expenses": "Created" 
 
    } 
 
]); 
 
    
 
}; 
 

 
ko.applyBindings(new viewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 
<table> 
 
    <thead> 
 
    <tr> 
 
     <th>??</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody data-bind="foreach: taskRecordOverview"> 
 
    <tr> 
 
     <td data-bind="text: $data"></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

https://jsfiddle.net/f79r4h2g/

Answer 1

を見てみたいか、あなたがループする必要がありますを通じて各オブジェクトのの値を表示します。ネストされた$dataと$parent場合

var viewModel = function() { 
 
    var self = this; 
 

 
    self.taskRecordOverview = ko.observableArray([{ 
 
     "Entity": "DEMO", 
 
     "Period": "2017-07-31T00:00:00", 
 
     "Level": "Level 3", 
 
     "Addendum Errors": null, 
 
     "Cash Process": "Created", 
 
     "Corporate Actions": null, 
 
     "Expenses": null 
 
    }, 
 
    { 
 
     "Entity": "DEMO", 
 
     "Period": "2017-07-31T00:00:00", 
 
     "Level": "Level 5", 
 
     "Addendum Errors": "Created", 
 
     "Cash Process": "Created", 
 
     "Corporate Actions": "Created", 
 
     "Expenses": "Created" 
 
    }, 
 
    { 
 
     "Entity": "SP00", 
 
     "Period": "2017-07-31T00:00:00", 
 
     "Level": "Level 5", 
 
     "Addendum Errors": "Created", 
 
     "Cash Process": "Approved", 
 
     "Corporate Actions": "Created", 
 
     "Expenses": "Created" 
 
    } 
 
    ]); 
 
}; 
 

 
ko.applyBindings(new viewModel());

td, th { 
 
    border: 1px solid #dddddd; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 
<table> 
 
    <thead> 
 
    <!--Only one object is enough for header--> 
 
    <tr data-bind="foreach:Object.keys(taskRecordOverview()[0]),visible:taskRecordOverview().length > 0"> 
 
     <th data-bind="text:$data"></th> 
 
    </tr> 
 
    </thead> 
 
    <tbody data-bind="foreach: taskRecordOverview"> 
 
    <!--Get the keys in each object and loop through them--> 
 
    <tr data-bind="foreach: Object.keys($data)"> 
 
     <!--Get the "value" for a key--> 
 
     <td data-bind="text: $parent[$data]"></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Here's a fiddle

---

：あなたはObject.keys

作業を抜粋して行うことができますは、我々はそれをより明確にするためにalias foreach items using as、その後することができます混乱しています

<table> 
    <tbody data-bind="foreach: { data:taskRecordOverview, as: '_task'}"> 
    <tr data-bind="foreach: { data:Object.keys(_task), as: '_key'}"> 
     <td data-bind="text: _task[_key]"></td> 
    </tr> 
    </tbody> 
</table> 

Here's an updated fiddle

私はこれが古い質問ですけど、それは興味深いものであるとの回答がうまくいけば、将来的に他の誰かを助けます:)