在 Meteor Blaze 中迭代 Objects

Question

我有一个嵌套的数据结构object。这是一张具有唯一 ID 键的地图。

然后每个键都包含另一个映射，该映射由另一组唯一的 id 键组成（_id 对应于 Mongo 文档）。这些键中的每一个都包含一个 Mongo 文档。

https://imgur.com/a/EjErAoF 是 Chrome 开发工具中数据结构的示例。

我想在 Blaze 中对此进行迭代。我的目标是让 header 显示 top-level 键（本例中为 1 和 2）……然后对于每个顶部 level-key，有一个 table，其中每一行是嵌套文档。

我知道 Blaze 只能遍历数组和游标，而不能遍历 JS Objects。 https://github.com/meteor/meteor/issues/3884 所以我使用 _.pair 将嵌套的 object 序列化为一个数组，这是我的结果 https://imgur.com/a/bnwzYNk

虽然我无法使用二维数组获得我想要的内容。因为现在我的 top-level 键（本例中的 1 和 2）位于数组的第一个索引处。我不知道如何在 each 中访问它。

简而言之，这是我的全部目标 IE。

{{#each 2dArray}}
    print {{this[0]}}
    <table>
        {{#each this[1]}}
            <tr>{{nestedThis.data}}</tr>
        {{/each}}
   </table>
{{/each}}

有没有人知道如何做到这一点，或者是否有更好的方法来构建我的数据？谢谢

Answer 1

您应该能够按如下方式重组您的数据

input = {
 1: {
   bob001: {_id: "bob001", name: "Bob" },
   jim002: {_id: "jim002", name: "Jim" },
 },
 2: { 
   kim001: {_id: "kim001", name: "Kim" },
   sue002: {_id: "sue002", name: "Sue" },
 }
}
 
 console.log(input);
 
 output = Object.keys(input).map(key => {
   return {
     key: key,
     data: Object.values(input[key]).map(row => {
       return Object.keys(row).map(k => {
         return {key: k, data: row[k]};
       });
     })
   }
})
 
console.log(output);

在您的组件中，将输入重组为新的 ReactiveVar。在 $autorun 中执行此操作，假设输入是反应性的（感谢 @Jankapunkt）：

Template.my_template.onCreated({
  this.formattedData = new ReactiveVar([]);
  this.$autorun(() => {
    const input = this.input; // get this from somewhere reactive?...
    this.formattedData = Object.keys(input).map(key => {
      return {
        key: key,
        data: Object.values(input[key]).map(row => {
          return Object.keys(row).map(k => {
            return {key: k, data: row[k]};
          });
        })
      }
    })
  })
})

然后就可以用blaze显示了：

  {{#each formattedData}}
    print {{key}}
    <table>
      {{#each data}}
        <tr>
        {{#each this}}
          <td>{{key}}: {{data}}</td>
        {{/each}}
        </tr>
      {{/each}}
    </table>
  {{/each}}

在 Meteor Blaze 中迭代 Objects

Iterate over Objects in Meteor Blaze

html

javascript

mongodb

meteor

meteor-blaze