PolymerElements / iron-ajax

Easily make ajax requests
https://www.webcomponents.org/element/PolymerElements/iron-ajax
127 stars 113 forks source link

Polymer2- Iron Ajax not working #279

Open Nagasai-Aytha opened 7 years ago

Nagasai-Aytha commented 7 years ago

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 on UI.

I didnt find any example related to Polymer2.0 for iron ajax and finding only polymer1.0 iron ajax examples

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
  }
}

Posted on stackoverflow as well - https://stackoverflow.com/questions/44685680/polymer-2-0-iron-ajax

steve-a-jones commented 7 years ago

The JSON above is invalid - try adding double quotes to the top level keys.

mvpmvh commented 7 years ago

is properties.json even valid? should not the first { be [ for an array?