Polymer 1.0 Data binding and accessing ajax response object

Question

I am new to polymer and I am trying to create a custom service that takes a request and sends back a response. However, I am facing an issue of accessing the response object even though I can see the object is being set in the service page.

Please see the service code: x-custom.html

 <link rel="import" href="bower_components/polymer/polymer.html"> <link rel="import" href="bower_components/iron-ajax/iron-ajax.html"> <dom-module id="x-custom"> <style> </style> <template> <iron-ajax id="ajax" url="" handle-as="json" on-response="hresponse" debounce-duration="300"> </iron-ajax> </template> <script> Polymer({ is: 'x-custom', properties: { user: String, responseData:{ type:Object, notify:true } }, attached: function() { this.$.ajax.url = "http://myapitesing/api/users/"+this.user; this.$.ajax.generateRequest(); }, hresponse: function(request) { // Make a copy of the loaded data respObj = request.detail.response; if(respObj){ //console.log(respObj); this.responseData = respObj; alert(respObj.email); } } }); </script> </dom-module> 

Now see the element that access the service: user-details.html

 <link rel="import" href="bower_components/polymer/polymer.html"> <link rel="import" href="x-custom.html"> <dom-module id="user-details"> <style> </style> <template> <x-custom user="6f299d3cb8214c079433d7bb98a4a5ed" responseData={{responseData}} ></x-custom> <h1>{{responseData.email}}</h1> </template> <script> Polymer({ is: 'user-details' }); </script> </dom-module> 

Now I call the user-details element in my idex.html in the following way

 <user-details></user-details> 

It successfully fetches the details, however, {{responseData.email}} does not show the email string in the user-details.html page.

If i try fetch the same value in the x-custom.html page, i can see the responseData.email value. (see the alert in hresponse function inside x-custom.html)

Kindly help me, and let me know if I am missing somewhere.

Answer 1

Note I haven't taken both your elements and tested this, but my guess is that your problem is in your <user-details> line where you do:

    <x-custom user="6f299d3cb8214c079433d7bb98a4a5ed" responseData={{responseData}} ></x-custom> 

Unless this is a typo, it definitely isn't binding to responseData because your attribute is in camelCase. You need to do:

    <x-custom user="6f299d3cb8214c079433d7bb98a4a5ed" response-data={{responseData}} ></x-custom> 

You may also need to make responseData in <x-custom> a property with notify: true ; I always forget.

Answer 2

if you are trying to fetch data by extending from other custom-element, then Polymer 1.0 currently does not support extending custom elements. You can find this shown in the docs at this link: https://www.polymer-project.org/1.0/docs/devguide/registering-elements.html#type-extension