简体   繁体   English

如何遍历聚合物中的一系列对象

[英]How to iterate through an array of objects in polymer

So looking around and testing things I can easily iterate through an array or a list. 因此,环顾四周并测试事物,我可以轻松地遍历数组或列表。

<template is="dom-repeat" items="{{inputs}}">
    <paper-input label={{item}} id={{item}} style="width:5em"></paper-   input>
</template>

However I am having problems iterating through an array of obects. 但是,我在遍历一系列对象时遇到了问题。

<iron-data-table id="outputtable" items="{{output}}">
        <template is="dom-repeat" items="[[output]]">
                <data-table-column name="[[item.key]]">
                    <template>[[item.value]]</template>
                </data-table-column>
        </template>
</iron-data-table>          

This code might not be right otherwise but I cannot get past the error 否则此代码可能不正确,但我无法克服错误

Polymer::Attributes: couldn`t decode Array as JSON Polymer :: Attributes:无法将数组解码为JSON

The first example of me iterating through an array of strings, i actually want to iterate through an array of objects but have not been able to do so. 我遍历字符串数组的第一个示例,我实际上想遍历对象数组,但未能做到这一点。

[{"uri":"/emoji/1"},{"uri":"/emoji/2"}]

Simple example of my array of objects. 我的对象数组的简单示例。

<iron-ajax id="ajaxPost" url={{url}} handle-as="json" content-type="application/json" method="POST" on-response=clearAndOutput > </iron-ajax>


this.output [Object { uri="/emoji/1"}, Object { uri="/emoji/2"}, Object { uri="/emoji/3"}, 35 more...] 

clearAndOutput: function(data) {
    this.returnvalue = data.detail.response;
}

In a dom-repeat , each array element of the items array is accessible by item inside the repeater template (although you could choose a different iterator name). dom-repeatitems数组中的每个array元素都可以通过转发器模板中的item访问(尽管您可以选择其他迭代器名称)。 If the array, named "output" , contained a "uri" attribute, you would iterate the array in the template like this: 如果名为"output"的数组包含"uri"属性,则可以在模板中迭代该数组,如下所示:

<template is="dom-repeat" items="[[output]]">
  <div>[[item.uri]]</div>
</template>

 HTMLImports.whenReady(() => { Polymer({ is: 'x-foo', properties: { output: { type: Array, value: () => [{"uri":"/emoji/1"},{"uri":"/emoji/2"}] } } }); }); 
 <head> <base href="https://polygit.org/polymer+1.7.0/components/"> <script src="webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="polymer/polymer.html"> </head> <body> <x-foo></x-foo> <dom-module id="x-foo"> <template> <template is="dom-repeat" items="[[output]]"> <div>[[item.uri]]</div> </template> </template> </dom-module> </body> 

codepen 码笔

The error you're seeing indicates that "output" is not actually an array, so you'll have to debug that (or provide additional information about how it's set in order to help troubleshoot). 您看到的错误表明"output"实际上不是数组,因此您必须对其进行调试(或提供有关其设置的其他信息,以帮助进行故障排除)。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM