Polymer 3.0 iron-ajax returning null response

Question

I have used Polymer 1 and 2 a lot professionally, but I haven't tried Polymer 3.0 until today. I am trying a test response but I just cannot get it to work.

Here's my iron-ajax component:

<iron-ajax id="requestData" url="/src/witches-brew-app/requests.json" handle-as="json" 
    last-response="{{requests}}"
    on-response="_requestResponse"
    on-error="_requestError">
</iron-ajax>

I have a button that calls the generateRequest function of the iron-jax, and as you can see a function which is called when the response is received.

_requestResponse(e){
    console.info(e);
    console.info(this.requests);
 }

_getRequests(){
    console.info("_getRequests")
    this.$.requestData.generateRequest().then(function (e) {
        console.info("_getRequests PROMISE")
        console.info(this.requests);
    }.bind(this));
}

The promise never seems to return, but the networking tab shows all my data in Google Chrome!

Networking tab

The _requestResponse function does get fired however it also prints the requests property as null.

Any idea what could be causing this? I cannot figure it out for the life of me. I have also tried it with the auto flag, and I get the exact same issue.

Answer 1

Most probably you have received the data at requests property. But at the above code, you received null due to the timing of retrieving data. So, if you observe the property something like below, you may see the data which you received by iron-ajax :

here the working example of iron-ajax DEMO

static get properties() { return { 
    requests: { 
       type: Object,
       observer:'_requestResponse'  }
}

_requestResponse(e){
    if (e) {
       console.info(e);
       console.info(this.requests);
    }
}

• Of course, you will need to remove the on-response="_requestResponse"

EDIT:

static get observers() { return ['_requestResponse(requests)'] }