CODEWITHSUNDEEP
ajaxdata-bindingpolymer-1.0
user1894963
user1894963

Reputation: 665

Polymer 1.0 Auto binding template with iron-ajax

I am trying to request a service via iron-ajax using the following in my index.html:

<body class="fullbleed">
    <template is="dom-bind" id="mainTemplate">
        <paper-material class="todo" elevation="1">
            <span>Mohammed</span>
        </paper-material>
        <br/>
        <iron-ajax id="requestGeoname" auto url="http://api.geonames.org/findNearbyPlaceNameJSON" params='{{input}}' handle-as="json" last-response="{{data}}"></iron-ajax>
        <span>{{data.geonames.0.countryName}}</span>
        <br/>
        <span>{{data.geonames.0.name}}</span>
    </template>
    <p id="geolocation">Finding geolocation...</p>
</body>

In my JS code, I would like to read {{data}} but could not do it. I tried to do it using the following:

<script type="text/javascript" charset="utf-8">
...
console.log(document.querySelector('#requestGeoname').data);
...
</script>

The code gives me undefined when I log {{data}}.

Upvotes: 0

Views: 119

Answers (2)

jorgecasar
jorgecasar

Reputation: 729

You have to wait until the request is finished. It's better to use the event response (More info: https://elements.polymer-project.org/elements/iron-ajax#response).

<script>
document.getElementById('requestGeoname').addEventListener('response', function(event){
    console.log(event.detail.response)
});
</script>

or declaratively:

<script>
var mainTemplate = document.getElementById('mainTemplate');
mainTemplate.onPlacesResponse = function(event){
    console.log(event.detail.response);
};
</script>

<iron-ajax … on-response="onPlacesResponse"

Upvotes: 1

Whyser
Whyser

Reputation: 2247

This should work:

<script type="text/javascript" charset="utf-8">
...
var template = Polymer.dom(this).querySelector('template[is=dom-bind]');
console.log(template.data);
...
</script>

As Dogs pointed out, the data property doesn't belong to requestGeoname-element, it belongs to the "template" item that is binded with dom-bind. Dogs solution should also work, but if you have other variables to use in your application, this is probably the better solution since they are now accesible through the template-object. For example:

...
template.myOthervariable = "derpherp";
...

Upvotes: 1

Related Questions