遍歷Javascript數組並顯示HTML（刪除）

Question

我想顯示我的模型的JSON數據。 這是其中可能存在的示例：

{"id":"1","name":"1","category":"A" },
{"id":"2","name":"2","category":"B" },
{"id":"3","name":"3","category":"A" },
{"id":"4","name":"4","category":"B" }

我想要的是將不同的al類別與javascript組合成一個數組，我想：

然后在匹配cat A的數組中的foreach元素像這樣用剔除進行打印：

<div data-bind="template: { name: template, foreach: LISTOFITEMS }"></div>

<script id="template">
<h1 data-bind="text: Category></h1>
<div data-bind=" foreach: LISTOFITEMSmatchingcategory ">
<li data-bind="text: name"></li>
</div> 
</script>

這是要走的路嗎？ 我想使東西易於排序（該數組是一個可觀察的數組）

Answer 1

請嘗試以下方式：-

 var self = this; self.listArr = ko.observableArray([ {"id":"1","name":"1","category":"A" }, {"id":"2","name":"2","category":"B" }, {"id":"3","name":"3","category":"A" }, {"id":"4","name":"4","category":"B" } ]); self.listA = ko.observableArray([]); self.listB = ko.observableArray([]); for(var i in self.listArr()) { if(self.listArr()[i].category == "A") { self.listA.push(self.listArr()[i]); } else if(self.listArr()[i].category == "B") { self.listB.push(self.listArr()[i]); } } ko.applyBindings(self); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <div>List A</div> <div data-bind="foreach:listA"> <span data-bind= "text : $data.name"></span> <br/> </div> <div>List B</div> <div data-bind="foreach:listB"> <span data-bind= "text : $data.name"></span> <br/> </div>