Javascript 访问聚合物重复中的嵌套数组

我有一个

用户

数组，如下所示：

        [{
            "name": "John",
            "surname": "McClane",
            "prefs": [{
                "Gourmande": 1,
                "Espiegle": 0
            }]
        },
        {
            "name": "Robert",
            "surname": "DeNiro",
            "prefs": [{
                "Gourmande": 1,
                "Espiegle": 0
            }]
        },
        {
            "name": "Siegfried",
            "surname": "Klause",
            "prefs": [{
                "Gourmande": 1,
                "Espiegle": 0
            }]
        }]

<ul class="userlist">
    <template repeat="{{ user in users }}">
        <li class="user">
            {{user.name}} preferences are listed below : <br>
            <template repeat="{{ pref in user.prefs }}">
                - {{ pref }} <br>
                <!-- {{ pref.Gourmande }} works fine, but I want to display "Gourmande" -->
            </template>
        </li>
    </template>
</ul>

我在我的模板中访问它，如下所示：

        [{
            "name": "John",
            "surname": "McClane",
            "prefs": [{
                "Gourmande": 1,
                "Espiegle": 0
            }]
        },
        {
            "name": "Robert",
            "surname": "DeNiro",
            "prefs": [{
                "Gourmande": 1,
                "Espiegle": 0
            }]
        },
        {
            "name": "Siegfried",
            "surname": "Klause",
            "prefs": [{
                "Gourmande": 1,
                "Espiegle": 0
            }]
        }]

<ul class="userlist">
    <template repeat="{{ user in users }}">
        <li class="user">
            {{user.name}} preferences are listed below : <br>
            <template repeat="{{ pref in user.prefs }}">
                - {{ pref }} <br>
                <!-- {{ pref.Gourmande }} works fine, but I want to display "Gourmande" -->
            </template>
        </li>
    </template>
</ul>

---

所使用的过滤器就是Scott答案中的过滤器。

您不能在对象上使用

模板重复

，只能在数组上使用

您可以接近您想要的语法，如下所示：

<template repeat="{{key in object | keys}}">
  {{key}}: {{object[key]}}<br>
</template>

---

您可以编写自己的过滤器，为您提供对象的键，并使用该键在对象上重复

例如：

<polymer-element name='my-elem'>
  <template>
    <ul>
    <template repeat="{{key in obj | objectKeys}}">
      <li>{{key}} - {{obj[key]}}</li>
    </template>
    </ul>
  </template>
  <script>
    Polymer('my-elem', {
      obj: {a: 1, b: 2, c: 3},
      objectKeys: function(inp) {
        var keys = Object.keys(inp);
        // important, as Object.keys may come in arbitrary order
        keys.sort(); 
        return keys;
      }
    });
  </script>
</polymer-element>

{{key}}-{{obj[key]}

聚合物（“my-elem”{
obj:{a:1，b:2，c:3}，
objectKeys:函数（inp）{
var-keys=Object.keys（inp）；
//重要信息，因为Object.key可能以任意顺序出现
keys.sort（）；
返回键；
}
});

---

用这个jsbin试试看：

我发现了一个项目的提交，在这个项目中，他们使用筛选函数将对象值转换为数组

这会产生漂亮的模板表达式（

），但问题是没有与原始用户对象的prefs属性进行数据绑定

---

如果您只需要一次绑定，这可能没问题。

为此，我在数组中使用了一个数组，如下所示：

<polymer-element people="[[1, "Brad B"], [2, "Alis A"], [3, "Samon S"]]">
</polymer-element>

<polymer-select value="{{ person }}">
  <option repeat="{{person in people}}" template value="{{person[0]}}">{{person[1]}}
  </option>
</polymer-select>

{{人[1]}

---

Hi Scott，我在polymer expression项目的一期中看到了这一点，有人投票赞成添加某种语法来迭代对象值。这个想法是因为实现问题而被放弃的，还是有一天我们可能会编写类似于

的东西？这是GitHub的问题：出于某种原因，这不起作用，我得到的只是：

0:[object object]

Scott的解决方案帮助我解决了它（更新的代码）。