在knockout js中顯示json對象的細節

Question

我有以下小提琴，我試圖在key：value對中顯示數據， 即key作爲標題，後面是作爲行的信息。

我擁有的數據格式爲：

self.data = ko.observableArray([{ 
     1: 
     { 

      name: 'Name 1', 
      lastLogin: '8/5/2012' 

     } 
     } 
    , { 
     2: 
     { 
      name: 'Name 2', 
      lastLogin: '2/8/2013' 
     } 
    } 

    ]); 

我有提琴：

https://jsfiddle.net/1988/z7nnf0fh/1/ 

我爲期待：

1 

name Name 1 lastLogin 8/5/2012 

2 
name Name 2 lastLogin 2/8/2013 

Answer 1

我個人移動所有的邏輯到你的視角模型。然後，你既可以使用ko.toJSON到每個字符串化對象的內容，或者如果你真的想有一個像上面的輸出，你可以這樣做：

function DataModel() { 
 
    var self = this; 
 
    self.data = ko.observableArray([{ 
 
     1: { 
 

 
     name: 'Name 1', 
 
     lastLogin: '8/5/2012' 
 

 
     } 
 
    }, { 
 
     2: { 
 
     name: 'Name 2', 
 
     lastLogin: '2/8/2013' 
 
     } 
 
    } 
 

 
    ]); 
 
    self.formattedValues = ko.observableArray([]); 
 
    self.formatData = function() { 
 
    var tempRow = []; 
 
    ko.utils.arrayForEach(self.data(), function(item) { 
 
     for (var i in item) { 
 
     for (var j in item[i]) { 
 
      tempRow.push({ 
 
      key: j, 
 
      value: item[i][j] 
 
      }); 
 
     } 
 
     self.formattedValues.push({ 
 
      key: i, 
 
      rows: tempRow 
 
     }); 
 
     tempRow = []; 
 
     } 
 
    }) 
 
    }; 
 
    self.formatData(); 
 
} 
 

 
var dataModel = new DataModel(); 
 
ko.applyBindings(dataModel);

.name { 
 
    color: #bbb; 
 
} 
 
.value { 
 
    fot-weight: bold 
 
} 
 
th { 
 
    width: 25px; 
 
} 
 
p { 
 
    margin-right: 10px; 
 
    display: inline-block; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<div data-bind="template: { name: 'template', data: formattedValues }"></div> 
 

 
<script type="text/html" id="template"> 
 
    <table> 
 
    <tbody data-bind="foreach: $data"> 
 
     <tr> 
 
     <td data-bind="text: key"></td> 
 
     </tr> 
 
     <tr> 
 
     <td data-bind="foreach: rows"> 
 
      <p> 
 
      <span class="name" data-bind="text: key + ': '"></span> 
 
      <span class="value" data-bind="text: value"></span> 
 
      </p> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</script>

希望幫助以某種方式