I have a project using Polymer 1.2, and am trying to create a data server component using iron-ajax called review_data_service.html, which can make AJAX call to send (GET,POST,PUT or DELETE) request to backend like this:
<dom-module id="review-data-service">
<template>
<iron-ajax url= "[[URI]]"
id="GET_REVIEWS"
handle-as="json"
loading="{{loading}}"
on-response="handleResponse"
content-type="application/json"
auto></iron-ajax>
</template>
<script>
Polymer({
is: 'review-data-service',
properties: {
reviewId : Number,
API: {
type: Object,
value: () => {
return {
BASE : 'http://localhost:3000',
RESOURCE : 'reviews'
};
}
},
URI : {
type : String,
computed : 'setURI(API.BASE, API.RESOURCE)'
}
},
setURI : (BASE, RESOURCE) => {
return `${BASE}/${RESOURCE}`;
},
handleResponse : function (event) {
let promise = new Promise ((resolve, reject) => {
if (event.detail.response != null) {
resolve(event.detail.response);
} else {
reject('error');
}
});
promise.then(result => {
this.fire('getReviews',
{reviews : result}
)
}, result => {
console.log('reject', result);
})
}
});
</script>
</dom-module>
In my another component, my-project-reviewer.html , I can get the review data successfully like this:
listeners: {
'getReviews': '_getReviews',
},
_getReviews: (event) => {
this.reviews = event.detail.reviews;
// can get the data successfully at here:
console.log(this.reviews);
},
However, when I try to show those data in the dom, it won't work:
<!-- cannot see anything here: -->
<template is="dom-repeat" items="[[reviews]]">
<div class="project-name">[[item.name]]</div>
</template>
Does any one know what happens? In the beginning, I didn't use Promise, I thought it maybe because of asyc issues (when dom is rendered, still cannot get data to display), so I used Promise, but still got the same result (only can get data in console) Plus, is any better way (or example) to create a data service in Polymer 1? (I used to use Angular which can perfectly make this happen) Just want to create a component like which can support basic http requests (GET,POST,PUT,DELETE) to be used in another component? or make the data service as a behaviors (I tried but doesn't work very well) thank you so much in advanced!
