Coulton Fraser Coulton Fraser -4 years ago 175
JSON Question

Polymer JS – template repeat does nothing with my array. (Chrome)

This does nothing in my code..

<template repeat="{{item in list}}"> </template>

I have tried to also use as below but I get errors with this method:

<template is="dom-repeat" id="example" items="{{list}}"></template>

And i get the following errors with

Uncaught TypeError: Polymer.dom.addDebouncer is not a function
Uncaught TypeError: Polymer.dom is not a function


Here is my code

<link rel="import" href="../lib/iron-ajax/iron-ajax.html">

<link rel="import" href="../lib/polymer/polymer.html">

<link rel="import" href="welcome-title.html">

<dom-module id="remove-user">

<iron-ajax id="getAll" url="http://localhost:3002/secure/api/all" method="GET" handle-as="json" on-response="getAllCB" with-credentials='true'></iron-ajax>

<div class="ui relaxed stackable grid centered" id="admin-container">
<welcome-title class="ui center aligned row grid"></welcome-title>
<form class="ui grid remove-user hide twelve wide column" method='post' action="/secure/add-user">
<h3>Remove User</h3>

<table class="ui unstackable celled table ">
<tr><th class="nine wide">Username</th>
<th class="three wide">Permission</th>
<th class="one wide"></th>
<tbody> ...

Here is where I am confused. I have simplified the loop to make it easier to debug but it doesn't appear. Although any text outside of the template repeat appears. There are no errors in the console.

<template repeat="{{user in users}}">

Why does nothing inside the repeat not show up on my page?

... <tr>
<td class="collapsing">
<div class="ui fitted checkbox">
<input type="checkbox"> <label></label>

<tfoot class="full-width">

<tr><th colspan="3">

<button class="right floated negative ui button"><i class="remove user icon"></i>Remove User(s)</button>




is: "remove-user",

ready: function(){



getAllCB: function(data){

this.users = data.detail.response;



The users JSON object looks like this when outputting to browser console using JSON.stringify():


Access to the complete project:
The file in question is under

The main page that loads this elements is

Answer Source

It looks like you're attempting to use an expression inside a data binding, which Polymer 1.x does not support (nor is it on the roadmap for 2.x).

The correct form of this code:

<template repeat="{{user in users}}">

is this:

<template is="dom-repeat" items="{{users}}" as="user">

HTMLImports.whenReady(() => {
    is: 'x-foo',
    properties: {
      users: {
        type: Array,
        value: () => ['Andy', 'Bob', 'Charlie']
  <base href="">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">

  <dom-module id="x-foo">
      <template is="dom-repeat" items="{{users}}" as="user">


You can read more about the dom-repeat template in the Polymer docs.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download