[英]Iterate over Objects in Meteor Blaze
我有一个嵌套对象的数据结构。 这是一个具有唯一 id 键的地图。
然后每个键包含另一个映射,该映射由另一组唯一的 id 键(_id 对应于 Mongo 文档)组成。 这些键中的每一个都包含一个 Mongo 文档。
https://imgur.com/a/EjErAoF是 Chrome 开发工具中数据结构的示例。
我想在 Blaze 中迭代这个。 我的目标是有一个显示顶级键(在本例中为 1 和 2)的标题……然后对于每个顶级键,有一个表,其中每一行都是一个嵌套文档。
我知道 Blaze 只能遍历数组和游标,而不能遍历 JS 对象。 https://github.com/meteor/meteor/issues/3884所以我使用 _.pair 将我的嵌套对象序列化为一个数组,这是我的结果https://imgur.com/a/bnwzYNk
但是,我在使用 2D 数组获得我想要的东西时遇到了麻烦。 因为现在我的顶级键(在本例中为 1 和 2)位于数组的第一个索引处。 我不知道如何在 each 中访问它。
简而言之,这是我的全部目标
{{#each 2dArray}}
print {{this[0]}}
<table>
{{#each this[1]}}
<tr>{{nestedThis.data}}</tr>
{{/each}}
</table>
{{/each}}
有没有人知道如何做到这一点,或者有没有更好的方法来构建我的数据? 谢谢
您应该能够按如下方式重组您的数据
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}}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.