Polymer iron-ajax not working

debugcn Published at Dev

lte__

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!

Pascal L.

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

Collected from the Internet

Please contact [email protected] to delete if infringement.