Polymer Iron-Ajax Does not Display Data

Question

I'm facing a problem, when i using Polymer's iron-ajax element.

I have a custom element like that:

   <link rel="import" href="../../bower_components/polymer/polymer.html">
   <link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
<dom-module id="first-element">
  <template>
    <!-- Stylesheet-->
    <style>
      ::host{
        display:block;
      }
    </style>
    <!-- Element content -->
    <h1>
      {{yolo}}
    </h1>
    <iron-ajax
       auto
       url="http://s3.amazonaws.com/codecademy-content/courses/ltp4/forecast-api/forecast.json"
       handle-as="json"
       on-response="handleResponse"
       last-response="ajaxResponse"></iron-ajax>

      <span>{{ajaxResponse.city_name}}</span>
  </template>
  <script>
    Polymer({
      is: "first-element",
      properties: {
        yolo: {
          type: String,
          value: 'YOLOOO'
        }
      },
      handleResponse: function(){
        console.log('Jobs Done')
      }
    });
  </script>
</dom-module>

The handleResponse function, also display's browsers developer console, so that request is working correctly. Databinding also working correctly, i can also see my "yolo" properties value.

But, it doesn't display data, i also use brackets e.g [[ajaxResponse.city_name]]

How can I solve that? Thanks for help!

Answer 1

You are not binding iron-ajax last-response attribute to any of your polymer element properties, it's supposed to be : last-response = "{{ajaxResponse}}".

In addition the amazon request need to be loaded over https. Here is Plunkr to see it in action.

You can check this PolyCast on iron-ajax if you want to learn more.

<dom-module id="first-element">
    <template>
      <!-- Stylesheet-->
      <style>
        ::host {
          display: block;
        }
        .icon{
          width:35px;
          height:auto;
          float:right;
          position:relative;
          top:-20px;
      }
      </style>
      <!-- Element content -->
      
      <h1>
      {{yolo}}
    </h1>

      <iron-ajax auto url="https://s3.amazonaws.com/codecademy-content/courses/ltp4/forecast-api/forecast.json" handle-as="json" on-response="handleResponse" last-response="{{ajaxResponse}}"></iron-ajax>
      <h1>{{ajaxResponse.city_name}}</h1>
      <template is="dom-repeat" items="{{ajaxResponse.days}}" index-as="day_no">
        <div>
          <hr>
          
          <span>Day : {{day_no}}</span>
          <br>
         <img src="{{item.icon}}" alt="" class="icon">
           <span> High: {{item.high}} C</span>
           <br>
           <span> Low: {{item.low}} C</span>
        </div>
       
      </template>

    </template>
    <script>
      Polymer({
        is: "first-element",
        properties: {
          yolo: {
            type: String,
            value: 'YOLOOO'
          },
          ajaxResponse: {
            type: Array
          }
        },
        handleResponse: function(e) {
          console.log(e.detail.xhr.response);
        }
      });
    </script>
  </dom-module>