Login/Register
Polymer 2.0 - How do I use iron-ajax?
Asked Answered
Solved polymerpolymer-2.x
M

1

8

I am trying to bind local properties.json and trying to create dynamic elements, but the problem is I am not getting any console errors and not seeing JSON in the UI.

I didn't find a Polymer 2.0 example for using <iron-ajax>, but I found ones for Polymer 1.0 only.

Here's the code I've tried:

polymer-input.html

<link rel="import" href="https://www.polymer-project.org/0.5/components/polymer/polymer-element.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/iron-ajax/iron-ajax.html">

<dom-module id="polymer-app">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <iron-ajax auto="" url="properties.json" handle-as="json" last-response="{{ajaxResponse}}"></iron-ajax>
    <template is="dom-repeat" items="[[ajaxResponse]]">
      <span>[[item.name]]</span>
    </template>
    <h2>Hello [[prop1]]!..[[ajaxResponse]]</h2>

  </template>

  <script>
    /**
     * @customElement
     * @polymer
     */
    class PolymerApp extends Polymer.Element {
      static get is() { return 'polymer-app'; }
      static get properties() {
        return {
          prop1: {
            type: String,
            value: 'polymer-app'
          }
        };
      }
    }

    window.customElements.define(PolymerApp.is, PolymerApp);
  </script>
</dom-module>

index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

    <title>polymer</title>
    <meta name="description" content="custom ele">


    <script src="https://www.polymer-project.org/0.5/components/webcomponentsjs/webcomponents-loader.js"></script>

    <link rel="import" href="polymer-app/polymer-app.html">
    <link rel="import" href="polymer-input/polymer-input.html">
  </head>
  <body>
    <polymer-app></polymer-app>
   </body>
</html>

properties.json:

{
  {
    name:"Name",
    type:"string",
    size:20
  },
  {
    name:"Age",
    type:"number",
    size:20
  }
}

I am getting below output instead of properties json data enter image description here

Melamie answered 21/6, 2017 at 20:26 Comment(2)
auto is a flag attribute, just like hidden, so remove the ="" after it. Also, do you see that the file was received in the developers tool, under the tab "Network"? Other than that, all i can do is give you an upvote, because i am having the same problem and no idea how to deal with it. – Ethbin
The three URLs starting with polymer-project.org/0.5 are 404. And, 0.5 is not even Polymer 1.0. They are quite different, and incompatible. – Coacervate
D
11

The first problem is your demo uses a base URL for Polymer 0.5, while your code is using Polymer 2.0 syntax. That is, this code:

<link rel="import" href="https://www.polymer-project.org/0.5/components/polymer/polymer-element.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/iron-ajax/iron-ajax.html">

...should be something like this:

<link rel="import" href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/polymer/polymer-element.html">
<link rel="import" href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/iron-ajax/iron-ajax.html">

Second, your properties.json file contains invalid JSON. It looks like you meant to use square brackets for array data; and your keys are missing quotes. You'll notice that running the file contents through JSON.parse() would throw an error. This text:

{
  {
    name:"Name",
    type:"string",
    size:20
  },
  {
    name:"Age",
    type:"number",
    size:20
  }
}

...should be something like this:

[
  {
    "name":"Name",
    "type":"string",
    "size":20
  },
  {
    "name":"Age",
    "type":"number",
    "size":20
  }
]

Third, note that <iron-ajax> automatically sets <iron-ajax>.lastResponse to null if <iron-ajax>.handleAs is json and the response cannot be parsed as JSON. In your case, the invalid JSON in properties.json would cause lastResponse to be set to null, preventing your example from rendering the intended fields.

Here's a working Polymer 2 <iron-ajax> demo (using your example code) with all corrections made: http://plnkr.co/edit/2mpJd1b0UF5FqAr2BOxL?p=preview

Dianemarie answered 22/6, 2017 at 5:24 Comment(2)
@NagaSaiA No problem :) – Dianemarie
The plnkr example doesn't work in IE. IE users still exist (unfortunately). Is there a way to make it work in IE? – Supinate

© 2022 - 2024 — McMap. All rights reserved.