How to iterate through an array of objects in polymer
Question
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
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;
}
1 answers
solution1
0 2016-11-01 12:08:25
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). If the array, named "output" , contained a "uri" attribute, you would iterate the array in the template like this:
<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>
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).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.