在 Meteor Blaze 中迭代對象

Question

我有一個嵌套對象的數據結構。 這是一個具有唯一 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}}

有沒有人知道如何做到這一點，或者有沒有更好的方法來構建我的數據？ 謝謝

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