title: Using polymer ajax response
body: <p>I have the following polymer element which I have created:</p>
  
  <pre><code>&lt;link rel="import" href="../bower_components/iron-ajax/iron-ajax.html"&gt;
  
  &lt;dom-module id="task-list-app"&gt;
      &lt;style&gt;
          :host {
  
          }
      &lt;/style&gt;
      &lt;template&gt;
          &lt;iron-ajax auto url="../tasks.json" handle-as="json" on-response="handleResponse"&gt;&lt;/iron-ajax&gt;
          &lt;template is="dom-repeater" items="{{todos}}"&gt;
              &lt;span&gt;hello&lt;/span&gt;
          &lt;/template&gt;
      &lt;/template&gt;
  &lt;/dom-module&gt;
  
  &lt;script&gt;
      Polymer({
          is: "task-list-app",
          created: function () {
              this.todos = [];
          },
  
          handleResponse: function (data) {
              this.todos = data.detail.response;
          }
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>I am calling this inside my index.html by doing:</p>
  
  <pre><code>&lt;task-list-app&gt;&lt;/task-list-app&gt;
  </code></pre>
  
  <p>I am expecting that for every object returned in the todo array, a <code>&lt;span&gt;</code> will be printed. However, when I run the app, I get the following output in the console:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'todos' of undefined</p>
  </blockquote>
  
  <p>in <code>polymer.html line 1001</code></p>
  
  <p>I am not sure what is happening here and how to reference the data received back from the ajax response.</p>