如何在敲除的ObservableArray中循環遍歷每個對象的鍵並動態創建表？

Question

我有一個由動態sql數據填充的observableArray 。 因此返回的列隨時可能不同。

我想在HTML表中顯示SQL結果。 但是，以下內容不起作用。

這就是我希望輸出看起來的樣子...

 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

在taskRecordOverview的foreach循環taskRecordOverview ，您需要循環瀏覽每個對象的keys並顯示值。 您可以使用Object.keys

工作片段：

 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> 

這是一個小提琴

---

如果嵌套的$data和$parent 綁定上下文令人困惑，那么我們可以使用as為每個項目創建別名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>

這是更新的小提琴

我知道這是一個古老的問題，但這是一個有趣的問題，希望該答案將來會對其他人有所幫助：）