循环遍历 Javascript 数组并显示 HTML（淘汰赛）答案

【问题标题】：looping through Javascript array and displaying HTML (knockout)循环遍历 Javascript 数组并显示 HTML（淘汰赛）
【发布时间】：2016-06-06 15:43:12
【问题描述】：

我想显示 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 将所有类别区分到一个数组中，我猜：甲乙。

然后在匹配 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>

这是要走的路吗？我想让东西容易排序（数组是一个可观察的数组）

【问题讨论】：

我认为你应该创建两个可观察数组，基于类别A 和B，然后对这两个数组使用foreach。

标签： javascript arrays knockout.js

【解决方案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>

【讨论】：