Jake Jake - 3 months ago 17
JSON Question

How to return values in a JSON object in Polymer?

New-ish to JSON. The following Polymer code works (the string is returned) for when the JSON file is a basic array (see target1.json), but when the data is within an object (target2.json), I'm not sure how to return the values inside of it?

<dom-module id="x-app">
<template>

<iron-ajax
url="target1.json"
handle-as="json"
last-response="{{data}}"
auto
></iron-ajax>

<iron-list
id="itemsList"
items="[[data]]"
>

<template>
<div class="pad">
[[item.name]]
</div>
</template>

</iron-list>

</template>
</dom-module>

<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-app',
properties: {
selectedItems: {
type: Object
}
},
});
});
</script>


target1.json:

[
{
"name": "blah blah blah"
},
{
"name": "blah blah blah 2"
},
]


target2.json:

{
"listing": [
{
"name": "blah blah blah"
},
{
"name": "blah blah blah 2"
}
]
}

Answer

Your <iron-ajax> is returning an object with an array inside (listing) but your <iron-list> is expecting an array.

So instead of

<iron-list id="itemsList" items="[[data]]">...</iron-list>

you should instead refer to the listing array inside data

<iron-list id="itemsList" items="[[data.listing]]">...</iron-list>