Polymer iron-ajax not working

Question

I'm testing Polymer's iron-ajax calls. For this, I set up a dummy view:

<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="shared-styles.html">
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout-classes.html">

<dom-module id="my-voltage">
  <template is="auto-binding">
  <style include="shared-styles iron-flex iron-flex-alignment">
  .circle {
    display: inline-block;
    text-align:center;
    color: black;
    border-radius: 70%;
    background: #ddd;
    font-size: 30px;
    width: 110px;
    height: 110px;
    margin: 15px;
  }
  </style>
        <iron-ajax id="ajax"
                   auto
                   url="https://jsonplaceholder.typicode.com/posts/1"
                   last-response="{{data}}"
                   on-response="_onResponse"
                   handleAs="json">
        </iron-ajax>
        <div class="circle">{{data.id}}</div>
    </template>
  <script>
    class MyVoltage extends Polymer.Element {
      static get is() {
        return "my-voltage";
      }

      _onResponse() {
        setTimeout(() => this.$.ajax.generateRequest(), 500);
      }
    }
    customElements.define(MyVoltage.is, MyVoltage);
  </script>
</dom-module>

This, however, doesn't work. I want to ping the API every half a second, but it's not even loading once: I'm just getting an empty circle.

What am I missing here? Why doesn't the API call work? Thank you!

Answer 1

Well the first thing that comes in mind is that you forgot to import it? Depending on the code you shared you only import polymer-element, shared-style and iron-flex-layout-classes. Next thing i see is that the handleAs param must be written as handle-as since html does not care about camel cases