Polymer Iron-Ajax Does not Display Data - ajax

Question

I'm facing a problem, when i using Polymer's iron-ajax element.
I have a custom element like that:
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
<dom-module id="first-element">
<template>
<!-- Stylesheet-->
<style>
::host{
display:block;
}
</style>
<!-- Element content -->
<h1>
{{yolo}}
</h1>
<iron-ajax
auto
url="http://s3.amazonaws.com/codecademy-content/courses/ltp4/forecast-api/forecast.json"
handle-as="json"
on-response="handleResponse"
last-response="ajaxResponse"></iron-ajax>
<span>{{ajaxResponse.city_name}}</span>
</template>
<script>
Polymer({
is: "first-element",
properties: {
yolo: {
type: String,
value: 'YOLOOO'
}
},
handleResponse: function(){
console.log('Jobs Done')
}
});
</script>
</dom-module>
The handleResponse function, also display's browsers developer console, so that request is working correctly. Databinding also working correctly, i can also see my "yolo" properties value.
But, it doesn't display data, i also use brackets e.g [[ajaxResponse.city_name]]
How can I solve that? Thanks for help!

Answer 1

You are not binding iron-ajax last-response attribute to any of your polymer element properties, it's supposed to be : last-response = "{{ajaxResponse}}".
In addition the amazon request need to be loaded over https.
Here is Plunkr to see it in action.
You can check this PolyCast on iron-ajax if you want to learn more.
<dom-module id="first-element">
<template>
<!-- Stylesheet-->
<style>
::host {
display: block;
}
.icon{
width:35px;
height:auto;
float:right;
position:relative;
top:-20px;
}
</style>
<!-- Element content -->
<h1>
{{yolo}}
</h1>
<iron-ajax auto url="https://s3.amazonaws.com/codecademy-content/courses/ltp4/forecast-api/forecast.json" handle-as="json" on-response="handleResponse" last-response="{{ajaxResponse}}"></iron-ajax>
<h1>{{ajaxResponse.city_name}}</h1>
<template is="dom-repeat" items="{{ajaxResponse.days}}" index-as="day_no">
<div>
<hr>
<span>Day : {{day_no}}</span>
<br>
<img src="{{item.icon}}" alt="" class="icon">
<span> High: {{item.high}} C</span>
<br>
<span> Low: {{item.low}} C</span>
</div>
</template>
</template>
<script>
Polymer({
is: "first-element",
properties: {
yolo: {
type: String,
value: 'YOLOOO'
},
ajaxResponse: {
type: Array
}
},
handleResponse: function(e) {
console.log(e.detail.xhr.response);
}
});
</script>
</dom-module>