Menu
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
693
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
87
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
