Using ajax polymer reaction

Question

I have the following polymer element that I created:

<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html"> <dom-module id="task-list-app"> <style> :host { } </style> <template> <iron-ajax auto url="../tasks.json" handle-as="json" on-response="handleResponse"></iron-ajax> <template is="dom-repeater" items="{{todos}}"> <span>hello</span> </template> </template> </dom-module> <script> Polymer({ is: "task-list-app", created: function () { this.todos = []; }, handleResponse: function (data) { this.todos = data.detail.response; } }); </script> 

I call this inside my index.html, doing:

 <task-list-app></task-list-app> 

I expect a <span> character to be printed for each object returned to the todo array. However, when I launch the application, I get the following output in the console:

Uncaught TypeError: cannot read the 'todos' property from undefined

at polymer.html line 1001

I'm not sure what is going on here and how to refer to the data retrieved back from the ajax response.

Answer 1

After several head bangs on the wall, I managed to solve this. I created my own element called ajax-service , which has the public property todos , which is Array . In this element, I use the iron-ajax element to call ajax.

When ajax is completed, the function is called and the response is set in the todos property. I also set the reflectToAttribute and notify to true. This means that the value of the todos property is reflected back to the attribute on the host node and that it is available for two-way binding (see here for more information).

My task-list-app element looks like this:

 <link rel="import" href="ajax-service.html"> <link rel="import" href="task-item.html"> <link rel="import" href="tiny-badge.html"> <dom-module id="task-list-app"> <style> :host { } </style> <template> <ajax-service todos="{{todos}}"></ajax-service> <template is="dom-repeat" items="{{todos}}"> <task-item task="{{item}}"></task-item> </template> <div> <tiny-badge>[[todos.length]]</tiny-badge> total tasks </div> </template> </dom-module> <script> Polymer({ is: "task-list-app" }); </script> 

and my ajax-service element:

 <link rel="import" href="../bower_components/iron-ajax/iron-ajax.html"> <dom-module id="ajax-service"> <style> :host { } </style> <template> <iron-ajax auto url="../tasks.json" handle-as="json" on-response="tasksLoaded"></iron-ajax> </template> </dom-module> <script> Polymer({ is: "ajax-service", properties: { todos: { type: Array, reflectToAttribute: true, notify: true } }, attached: function () { this.todos = []; }, tasksLoaded: function (data) { this.todos = data.detail.response; } }); </script> 

Performing this method means that I can edit the data in the on-response function before setting it in the element.

Answer 2

First of all, the second template that you use to scroll through your data should be " dom-repeat ", not " dom-repeatater ". Secondly, you can directly bind iron-ajax response to your loop pattern. Like this,

 <link rel="import" href="../bower_components/iron-ajax/iron-ajax.html"> <dom-module id="task-list-app"> <style> :host { } </style> <template> <iron-ajax auto url="../tasks.json" handle-as="json" last-response="{{ajaxResponse}}"></iron-ajax> <template is="dom-repeat" items="[[ajaxResponse.todos]]"> <span>{{item.todoItem}}</span> </template> </template> </dom-module> <script> Polymer({ is: "task-list-app" }); </script> 

This way you directly bind the value of the last-response property to the loop pattern.

Answer 3

You need to define a property before using it in scripts:

 <script> Polymer({ is: "task-list-app", properties: { todos: { type: Array, notify: true } }, handleResponse: function (data) { this.todos = data.detail.response; } }); </script>