Json Knockout.js分组查找

对淘汰赛来说有点陌生，所以我似乎在与这个分组作斗争

服务器返回以下json

{"EmployeeData":[{"Id":1,"EmployeeName":"AA Guy1","EmployeeNumber":1004,"Department":1},{"Id":2,"EmployeeName":"BB Guy2","EmployeeNumber":1004,"Department":2},{"Id":3,"EmployeeName":"CC Guy3","EmployeeNumber":1004,"Department":2},{"Id":4,"EmployeeName":"DD Guy4","EmployeeNumber":1004,"Department":3},{"Id":5,"EmployeeName":"EE Guy5","EmployeeNumber":1004,"Department":1},{"Id":6,"EmployeeName":"FF Guy6","EmployeeNumber":1004,"Department":3}],"Dpts":[{"Id":1,"Name":"First Level Department","Desc":"1st somewhere out there"},{"Id":2,"Name":"Finance services","Desc":"Show me the money"},{"Id":3,"Name":"HR Department","Desc":"No education needed"}]}

然后我有一张桌子

<tbody data-bind="foreach: GroupEmployees" >
    <tr class="employee-row">
    <td>
        <strong>
           <span data-bind="text: EmployeeName"></span>
        </strong>
    </td>
    <td>
        <span data-bind="text: EmployeeNumber"></span>
    </td>
    <td>
        <span data-bind="text: Department" />
    </td>
    </tr>
</tbody>

这显示了员工和部门编号，。。。。 我将DPT添加到json中，现在我必须将其按部门分组。因此，它必须有一个部门标题——在该列表下，该部门的所有员工，然后对每个部门重复

我正努力想知道如何把这件事做好

---

对于有更多击倒经验的人来说，这可能很简单。

我能看到的实现这一点的最简单方法是修改数据，使其如下所示：

{
  "Dpts" : [
      {
          "Name" : "Finance",
          "EmployeeData" : 
          [
             { "Id":"1", "EmployeeNumber":1001 },
             { "Id":"2", "EmployeeNumber":1002 },
             { "Id":"3", "EmployeeNumber":1003 }
          ]
      },
      {
          "Name" : "HR",
          "EmployeeData" : 
          [
             { "Id":"4", "EmployeeNumber":1004 },
             { "Id":"5", "EmployeeNumber":1005 },
             { "Id":"6", "EmployeeNumber":1006 }
          ]
      },
  ]
}

然后有两个嵌套的敲除“foreach”：

...

Create jsfiddle demo，如果没有它，就不可能理解问题的原因。嗯，我怀疑你能用json结构的方式来解决这个问题。您可以更改此设置以返回每个部门对象中的员工数据记录吗？我可以在员工记录中返回部门名称，而不是Id。我认为这不会有帮助-问题是，我不知道有任何剔除指令会动态创建分组的绑定上下文（如果有意义的话）。您将需要自己构建它，即使它是在您的javascript代码中……因此，如果我添加dept name，那么我可以使用类似这样的东西，这似乎是我所需要的，谢谢。

<tbody data-bind="foreach: Dpts" >
<tr>
  <td>
    <strong>
       <span data-bind="text: Name"></span>
    </strong>
  </td>
  <td>
     <table>
       <tbody data-bind="foreach: EmployeeData">
       ...
       </tbody>
     </table>
  </td>
</tr>
</tbody>