Reading and displaying json data using Polymer
I am new to polymer and I am trying to read JSON data in a custom element and display it in another element.
This is my JSON data:
jsonData.json
[
{
"name":"Ladies+Chrome+T-Shirt",
"title":"Ladies Chrome T-Shirt"
},
{
"name":"Ladies+Google+New+York+T-Shirt",
"title":"Ladies Google New York T-Shirt"
}
]
This is my file shop-app.html
where I am trying to read data from a JSON file (I am not sure if this is correct or not as I cannot test it):
<dom-module id="shop-category-data">
<script>
(function(){
class ShopCategoryData extends Polymer.Element {
static get is() { return 'shop-category-data'; }
static get properties() { return {
data: {
type: Object,
computed: '_computeData()',
notify: true
}
}}
_computeData() {
this._getResource( {
url: 'data/jsonData.json',
onLoad(e){
this.set('data.items', JSON.parse(e.target.responseText));
}
})
}
_getResource(rq) {
let xhr = new XMLHttpRequest();
xhr.addEventListener('load', rq.onLoad.bind(this));
xhr.open('GET', rq.url);xhr.send();
}
}
customElements.define(ShopCategoryData.is, ShopCategoryData);
})();
</script>
</dom-module>
This is the element where I want to display the data that I read from the JSON file:
<dom-module id="shop-app">
<template>
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/:page"
data="{{routeData}}"
tail="{{subroute}}">
</app-route>
<shop-category-data data="{{data}}"></shop-category-data>
<template>
<div> Employee list: </div>
<template is="dom-repeat" items="{{data}}">
<div>First name: <span>{{item.name}}</span></div>
<div>Last name: <span>{{item.title}}</span></div>
</template>
</template>
</template>
<script>
class ShopApp extends Polymer.Element {
static get is() { return 'shop-app'; }
}
customElements.define(ShopApp.is, ShopApp);
</script>
</dom-module>
The string <shop-category-data data="{{data}}"></shop-category-data>
should provide me with data, which I then try to display using dom-repeat. But nothing is displayed. So, I think there is some error in my reading of the JSON data.
Edit : The
JSON is reading correctly, it just isn't reflected in my:
<shop-category-data data="{{data}}"></shop-category-data>
source to share
Computed properties do not return a value. If you want to define data
as a computed property, you must return a value from the computed property function _computeData()
. But in your case you are using async XMLHttpRequest
. So, if you return the value after the call this._getResource...
, you need to make it synchronous ( which nobody recommends ).
Plnkr for synchronous method: http://plnkr.co/edit/jdSRMR?p=preview
Another way is to call the method inside ready()
. It's asynchronous.
source to share
Why not try using iron-ajax , your code will be cleaner and leaner, and you will get data to be passed directly to it, so you can use it with other elements.
<iron-ajax
auto
url="https://www.googleapis.com/youtube/v3/search"
params='{"part":"snippet", "q":"polymer", "key": "YOUTUBE_API_KEY", "type": "video"}'
handle-as="json"
on-response="handleResponse"
debounce-duration="300"></iron-ajax>
source to share
This is not returned because the json is assigned data.items
and not itself data
.
this.set('data', JSON.parse(e.target.responseText));
<iron-ajax>
Scrap is also recommended <shop-category-data>
. for example replace the following line
<shop-category-data data="{{data}}"></shop-category-data>
from
<iron-ajax auto url="data/jsonData.json" handle-as="json"
last-response="{{data}}"></iron-ajax>
source to share