Polymer iron-ajax data binding example not working

Question

I'm having problems with iron-ajax and data binding in Polymer 1.0.2. Not even a slightly changed example from the Polymer documentation is working.

Here is the code with my changes:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <script src="../../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="../../../bower_components/polymer/polymer.html">
    <link rel="import" href="../../../bower_components/iron-ajax/iron-ajax.html">

</head>
<body>

<template is="dom-bind">

    <iron-ajax
            auto
            url="http://jsonplaceholder.typicode.com/posts/"
            lastResponse="{{data}}"
            handleAs="json">
    </iron-ajax>

    <template is="dom-repeat" items="{{data}}">
        <div><span>{{item.id}}</span></div>
    </template>

</template>

<script>
    (function (document) {
        'use strict';

        var app = document.querySelector('#app');

        window.addEventListener('WebComponentsReady', function() {
            var ironAjax = document.querySelector('iron-ajax');
            ironAjax.addEventListener('response', function() {
                console.log(ironAjax.lastResponse[0].id);
            });
            ironAjax.generateRequest();
        });

    })(document);

</script>
</body>
</html>

All I changed was entering a URL to get a real JSON response and setting the auto and handleAs properties. I also added a small script with a listener for the response event. The listener is working fine and handles the response, but the spans in the dom-repeat template aren't rendered.

I'm using Polymer 1.0.2 and iron-elements 1.0.0

I had a similar issue, look [here](https://stackoverflow.com/questions/30591409/using-polymer-ajax-response) for my question and the two answers (including my own!) and see if they help. — Ben Thomas, Jun 03 '15 at 20:38

Matteo Mazzarolo · Accepted Answer · 2015-06-03T20:03:39.937

10

It seems the documentation you is missing a - character in the lastresponse attribute of the example.

You must change lastResponse to last-response. Look at this example from the iron-ajax github page.

edited Jun 03 '15 at 20:03

answered Jun 03 '15 at 19:54

Matteo Mazzarolo

4,420
1
16
17

3

The documentation is not missing anything. lastResponse is the property of custom element . When properties are converted to attributes, camelCase must be converted to hyphenated attributes. Hence lastResponse becomes last-response when used as an attribute. – Aravind Jun 03 '15 at 20:01
Sorry, i just mispelled it, edited. :) If you look at Emanuel example you'll see that he is using `lastResponse`, which should be `last-response`. – Matteo Mazzarolo Jun 03 '15 at 20:04
Thank you Matteo! That did the trick. It seems the example in the Polymer doc is wrong. The exact line in the example is `` – Emanuel Seidinger Jun 04 '15 at 06:13
1

I just found the rules for [property name to attribute name mapping](https://www.polymer-project.org/1.0/docs/devguide/properties.html#property-name-mapping). Camel case property <-> attribute with a dash. – Emanuel Seidinger Jun 04 '15 at 06:25

score 2 · Answer 2 · answered Dec 25 '15 at 22:53

2

when you use a attribute on a element, you have to convert the camelcase sentence to dashes sentence, I mean:

lastResponse is maps to last-response

Property name to attribute name mapping

answered Dec 25 '15 at 22:53

framled

388
5
18

Polymer iron-ajax data binding example not working

2 Answers2