How to Write a Composable AJAX Call in Polymer - ajax

Question

I am trying to write a component that exposes the data from an AJAX call in Polymer. I would like to end with something like.
<get-db data={{data}}></get-db>
<template is="dom-repeat" items="{{data}}">
<div>{{item}}</div>
</template>
However, when I expose the data property from get-db component in another element, the data doesn't bind to the dom-repeat template.
The get-db component parts are as follows
<iron-ajax id="ajax"
url="https://api/endpoint"
method="post"
handle-as="json"
content-type="application/json"
body="[[request]]"
last-response="{{response}}"></iron-ajax>
...
static get properties() {
return {
response: Object,
request: Object,
username: String,
data: Object
}
}
getResponse() {
if (this.username && this.apiKey) {
this.request = {
"body": "bodyText"
};
let request = this.$.ajax.generateRequest();
request.completes.then(req => {
this.setResponse();
})
.catch(rejected => {
console.log(rejected.request);
console.log(rejected.error);
})
}
}
setResponse() {
if(this.response[0]) {
this.data = this.response[0];
}
}

Answer 1

The data property needs to be set to notify.
data: {
type: Object,
notify: true
}

Answer 2

You need to add notify but also you need to use this.set method in order to get observable changes for data properties. Also you are setting only one item to data properties (assuming you have a array at response properties.) I guess you need all array instead only 0. index as you are looping in dom-repeat. That's why this below code may help:
static get properties() {
return {
response:{
type:Object,
observer:'checkResponce'},
request: Object,
username: String,
data: {
type:Array,
notify:true}
}
}
static get observers() { return [ 'checkUserNApi(username,apiKey)']}
checkUserNApi(u,a){
if (u && a) this.$.ajax.generateRequest();
}
checkResponce(d) {
if (d) {
this.set('data',d); //with this method data property at parent will change upon you received responce
}
}
Finally, you may add to iron-ajax a line check error on-error="{{error}}" if you want to see an error report.
DEMO