Using polymer iron-ajax in a repeating matrix
How to load json file and use data in repeating pattern? This code does nothing:
<dom-module id="name-list">
<template>
<iron-ajax auto url="names.json" handleAs="json" lastResponse="{{data}}"></iron-ajax>
<template is="dom-repeat" items="{{data}}">
<div>First name: <span>{{item.firstName}}</span></div>
<div>Last name: <span>{{item.lastName}}</span></div>
</template>
</template>
</dom-module>
<script>
Polymer({
is: "name-list"
});
</script>
Here is my json file (Edit: fixed after vasek's answer):
{
[
{
"firstName": "John",
"lastName": "Smith"
},{
"firstName": "Jane",
"lastName": "Doe"
}
]
}
I would like to have the following:
<div>First name: <span>John</span></div>
<div>Last name: <span>Smith</span></div>
<div>First name: <span>Jane</span></div>
<div>Last name: <span>Doe</span></div>
I have enabled iron-ajax elsewhere in my code. I have already tested the general functionality. It only works in the context of data binding.
source to share
First, as wassek says, your JSON is wrong. dom-repeat
an array is required to iterate over and your JSON is currently returning an object. Second, you are using the element properties incorrectly iron-ajax
. As docs state
To customize camel element properties for elements using attributes, use dash-case in the attribute name.
You are trying to install handleAs
and lastResponse
. To do this, you need to change them to a casket:
<iron-ajax auto url="names.json" handle-as="json" last-response="{{data}}"></iron-ajax>
Otherwise, everything else should work correctly.
source to share