Unable to display data in polymer api - json

Question

I was using polymer example and they used core-ajax to call the api.I want to display text from the openweathermap api.When i call the api it displays no data.I'm not able to display any data and when i placed console.log(this.post) in the post-list element it gives me undefined.I'm practically a noob when it comes to polymer.
Below is the Api Calling Method
<polymer-element name="post-service" attributes="posts">
<template>
<style>
:host {
display: none;
}
</style>
<core-ajax id="ajax"
auto
url="http://api.openweathermap.org/data/2.5/weather?q=hyderabad"
on-core-response="{{postsLoaded}}"
handleAs="json">
</core-ajax>
</template>
<script>
Polymer('post-service', {
created: function() {
this.posts = [];
},
postsLoaded: function() {
// Make a copy of the loaded data
this.posts = this.$.ajax.response;
},
/**
* Update the service with the current favorite value.
* (Two-way data binding updates the favorite value
* stored locally.) If this was a real service, this
* method would do something useful.
*
* #method setFavorite
* #param uid {Number} Unique ID for post.
* #param isFavorite {Boolean} True if the user marked this post as a favorite.
*/
setFavorite: function(uid, isFavorite) {
// no service backend, just log the change
console.log('Favorite changed: ' + uid + ", now: " + isFavorite);
}
});
</script>
</polymer-element>
This is element is used to display
<polymer-element name="post-list" attributes="show">
<template>
<style>
:host {
display: block;
width: 100%;
}
post-card {
margin-bottom: 30px;
}
</style>
<post-service id="service" posts="{{posts}}">
</post-service>
<div layout vertical center>
<template>
<post-card>
<h2>{{post.weather.main}}</h2>
<p>{{post.weather.description}}</p>
</post-card>
</template>
</div>
</template>
<script>
Polymer({});
console.log(this.post);
</script>
</polymer-element>
Example json
[
{
"uid": 1,
"text" : "Have you heard about the Web Components revolution?",
"username" : "Eric",
"avatar" : "../images/avatar-01.svg",
"favorite": false
},
{
"uid": 2,
"text" : "Loving this Polymer thing.",
"username" : "Rob",
"avatar" : "../images/avatar-02.svg",
"favorite": false
}
]
My api response(json)
{
"coord": {
"lon": 78.47,
"lat": 17.38
},
"weather": [
{
"id": 802,
"main": "Clouds",
"description": "scattered clouds",
"icon": "03d"
}
],
"base": "cmc stations",
"main": {
"temp": 303.15,
"pressure": 1010,
"humidity": 62,
"temp_min": 303.15,
"temp_max": 303.15
},
"wind": {
"speed": 7.7,
"deg": 280
},
"clouds": {
"all": 40
},
"dt": 1436677800,
"sys": {
"type": 1,
"id": 7830,
"message": 0.0124,
"country": "IN",
"sunrise": 1436660330,
"sunset": 1436707470
},
"id": 1269843,
"name": "Hyderabad",
"cod": 200
}

Answer 1

The core-ajax element sends an event when the data are received. To use them you have to manipulate the fired event.
postsLoaded: function(event, detail) {
// Event contains lot of informations
console.log(event);
// Detail would be the received data
console.log(detail);
// Make a copy of the loaded data
this.posts = detail; // or this.posts = event.detail;
}
It would be easier to see what happens if you add a listener on the posts attributes in your element post-list. See the doc section Observing properties.
<script>
Polymer({
postsChanged: function(oldValue, newValue) {
console.log(newValue);
}
});
</script>
Moreover, I think you have a typo in your code. In the template you are using post and no posts :
<template>
<post-card>
<h2>{{post.weather.main}}</h2>
<p>{{post.weather.description}}</p>
</post-card>
</template>
Finally, if you are starting with Polymer, I suggest you to start with the version 1.0.