Iron-list doesn't show data fetched from iron-ajax

Question

I'm new to Polymer so I tried almost everything that I found on Internet, but it didn't work. I got only a white page. What I'm doing wrong? This is my code

<!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>ScuolaMedia</title>
  <meta name="description" content="ScuolaMedia description">

  <link rel="manifest" href="/manifest.json">

  <script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
  <link rel="import" href="/bower_components/polymer/polymer.html">
  <link rel="import" href="/bower_components/iron-ajax/iron-ajax.html">
  <link rel="import" href="/bower_components/iron-list/iron-list.html">

</head>

<body>
    <iron-ajax url="data.json" last-response="{{data}}" auto></iron-ajax>
    <iron-list items="[[data]]" as="item">
      <template>
        <div>
          Name: [[item.name]]
        </div>
      </template>
    </iron-list>

</body>

</html>

And this data.json:

[
    {"name": "Bob"},
    {"name": "Tim"},
    {"name": "Mike"}
  ]

Cappittall · Accepted Answer · 2018-02-25T10:58:13.447

All looks good. The only points that handle-as="json", and the data.json must exists at the same root. Here is the example

DEMO

<html>
<head>
  <base href="https://polygit.org/polymer+:master/components/">
  <link href="polymer/polymer.html" rel="import">
  
  <link rel="import" href="iron-ajax/iron-ajax.html">
  <link rel="import" href="iron-list/iron-list.html">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
</head>
 <body>
   
   
  <web-app>test ( if you see 'test' message, necassary libraries could not loaded. Try this later and check dev tools.(F12) </web-app>

  <dom-module id="web-app">
  <template>
    <style>
      :host {
        display: block;
        height: 100%;
      }
    
    </style>
    <iron-ajax url="https://randomuser.me/api?results=10" handle-as="json" last-response="{{users}}" auto></iron-ajax>
    <iron-list items="[[data]]" as="item">
      <template>
        <div>
          Name: [[item.name]]
        </div>
      </template>
    </iron-list> 
  
    
  </template>
    <script>
    HTMLImports.whenReady(function() {
    class WebApp extends Polymer.Element {
      static get is() { return 'web-app'; }
      static get properties() { return { 
       data:{
           type:Array,
           value() {return [];}
       }
     }}; 
    static get observers() { return ['checkDataLoaded(users)']}
    checkDataLoaded(s){ 
                console.log(s);
                this.set('data', [{"name": "Bob marley"},{"name": "Timothy Dallas"},{"name": "Mike Jaegers"}])
    }
      

 }
      
  
customElements.define(WebApp.is, WebApp);
 });
    
</script>
</dom-module>
</body>
</html>

They are in the same root and `handle-as="json"` didn't work. But I noticed that there was an error: property-accessors.html:259 Polymer::Attributes: couldn't decode Array as JSON: [[data]]. This might help.. — Dani Pani danipani, Feb 24 '18 at 20:22
Yes, Dani, I saw that, too. I think what you're getting at--and what I'm wondering about myself--is why must these two custom elements be wrapped in a parent custom element to work? Is that parent just what it take for the `data` property to be shared? I'm thinking it is. — Thad, Feb 24 '18 at 20:49
@Thad Did you find out about the wrapping elements? I am curious too. Do you need those for the example to work? — clapas, Dec 24 '19 at 17:20
No, @clapas, I never did. Shortly after this I switch to `lit-html` and `LitElement` where I use `fetch` and `render`. I've no `iron-` or `paper-` components now. (I'm also finding JS modules *a lot* easier to work with than HTML Imports.) — Thad, Dec 24 '19 at 20:48

Iron-list doesn't show data fetched from iron-ajax

1 Answers1