Set Tabellenspalten dynamisch von ko.ObservableArray

Question

Ich versuche, eine Tabelle von Daten basierend auf einem ko.observableArray, wo die Spalten zurückgegeben werden, sind nicht im Voraus festgelegt.

Eine Probe eines Artikels aus der Liste meiner observableArray self.userData()[0] wäre:

Object { 
     RowNum: 1, 
     ID: "123", 
     Surname: "Bloggs", 
     Forename: "Joe", 
     Address line 1: "1 Park Lane" 
} 

Diese Spalten jedes Mal anders sein würde, auf das, was der Benutzer zur Ausgabe ausgewählt hat.

ich die Spaltenüberschriften in meinem ausgegeben werden soll, indem bestimmt werden, was in der Anordnung vorhanden ist, so meine gewünschte Ausgabe wäre:

<table> 
    <thead> 
     <tr> 
     <th>RowNum</th> 
     <th>ID</th> 
     <th>Surname</th> 
     <th>Forename</th> 
     <th>Address line 1</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td>1</td> 
     <td>123</td> 
     <td>Bloggs</td> 
     <td>Joe</td> 
     <td>1 Park Lane</td> 
     </tr> 
     <!-- repeated for each row --> 
    </tbody> 
</table> 

Ich weiß, ich foreach Zeilen und Spalten wiederholen kann, aber ich bin mir nicht sicher, wie ich es basierend auf dem, was in meinem observableArray vorhanden ist, dynamisch referenzieren kann.

Im Moment habe ich diese grundlegende Struktur haben:

<table> 
    <thead> 
     <tr data-bind="foreach: userData [property name] "> 
      <th> 
       <span data-bind="text: [property name]"></span> 
      </th>     
     </tr> 
    </thead> 
    <tbody data-bind="foreach: userData">     
     <tr data-bind="foreach: userData [property name]> 
      <td data-bind="text: [property value]">        
      </td>       
     </tr> 
    </tbody> 
</table> 

Answer 1

Sie können das tun:

JS:

var VM = function() { 
    var self = this; 
    self.items = ko.observableArray(); 
    self.columnNames = ko.computed(function() { 
     if (self.items().length === 0) 
      return []; 
     var props = []; 
     var obj = self.items()[0]; 
     for (var name in obj) 
      props.push(name); 
     return props; 


    }); 

}; 
var vm = new VM(); 

ko.applyBindings(vm); 

vm.items.push({ 
    'Name': 'John', 
    'Age': 25 
}); 
vm.items.push({ 
    'Name': 'Morgan', 
    'Age': 26 
}); 

Ausblick:

<table> 
    <thead> 
     <tr data-bind="foreach: columnNames"> 
      <th> <span data-bind="text: $data"></span> 

      </th> 
     </tr> 
    </thead> 
    <tbody data-bind="foreach: items"> 
     <tr data-bind="foreach: $parent.columnNames"> 
      <td data-bind="text: $parent[$data]"></td> 
     </tr> 
    </tbody> 
</table> 

See fiddle

Ich hoffe es hilft.