javascript - 循环 Javascript 数组并显示 HTML (knockout)

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" }

我想要的是用javascript将不同的类别放入一个数组中，我猜:一个B。

然后 foreach 数组中的元素匹配 cat A 将其打印出来，如下所示:

<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>