Databind iron-ajax JSON response entry to nested Polymer custom elements

Question

I've got a Polymer app running an iron-ajax call to a service that returns a json string:

{
    "name": "John"
}

The Polymer code on the main page is:

<link rel="import" href="/elements/my-form.html">

<dom-module id="my-app">

    <template>

        ...

        <iron-ajax auto url="/grabData" handle-as="json" last-response="{{data}}"></iron-ajax>

        <iron-label>
            From iron-ajax = {{data.name}}
        </iron-label>

        <my-form></my-form>

       ...

"my-form" is:

<link rel="import" href="/my-name.html">

<dom-module id="my-form">

    <template>
        <my-name></my-name>
    </template>

    <script>
        Polymer({
            is: 'my-form'
        });
    </script>

</dom-module>

And "my-name" is:

<dom-module id="my-name">

    <template>
        <iron-label>
            From my-name = {{data.name}}
        </iron-label>
    </template>

    <script>
        Polymer({
            is: 'my-name'
        });
    </script>

</dom-module>

When run, "From iron-ajax = John", and "From my-name =".

While I could use a single ajax call within my-name, I'd don't want to do this for every custom element. I'd rather acquire my data in one call and have custom elements access the returned data.

How do I acquire 'name' within my-name without passing the value through the my-form element?

--- Update ---

For a little more clarity on desired outcomes, here's a little more info.

Ultimately I'd like to acquire a very large JSON string with multiple entries:

{
    "name": "John",
    "address": [{
        "street" : "14 Baker Street",
        "city" : "somewhereville"
    }],
    "phone": "123-1234"
    ...
}

And have custom elements handle each entry:

<dom-module id="my-form">

    <template>
        <my-name></my-name>
        <my-address></my-address>
        <my-phone></my-phone>
        ...
    </template>

I've only used ajax results inside their own template. Not sure if it's possible to do otherwise, though I'm no polymer expert. — dlsso
I've done the same. I'd prefer to make one call since I need to return several data items. — TERACytE
You can either store it in localStorage or you can fire an iron-signal which will contain the data and can listen to that signal in your my-name element. Thoughi'll recommend passing the data through my-form element through data-binding. — a1626
@a1626 Yep, my fallback was: "<my-form data={{data}}></my-form>" & then "<my-name name={{data.name}}></my-name>". I was hoping to be less verbose, though it is more in line with the MVC pattern. Is this what you were referring too? — TERACytE

a1626 a1626 · Accepted Answer · 2016-07-14T19:07:35

Below is the example snippet on how to pass data between elements. Instead of ajax call i've passed data from element's attribute. Some key points to be noted

In case you want to pass whole data to child elements you can replace name property in child element with data property of parent, names doesn't have to be same, eg if child has a property user with type Object(first letter caps) then your binding will be user={{data}}
If you want you can replace {{}} with [[]], unless you want to propagate change from child to parent in which case you will have to add another parameter to name property namely notify and set its value as true, something like
```
name:{
 type:String,
 notify:true
}
```
In your case(with ajax call) listing name and data inside properties is optional, but i'll recommend it as it makes it easy to add new features to a property(like notify) and also makes it easy to track all the properties in a large element.
For more details on properties and data-binding checkout these links. properties, data-binding

<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">


<dom-module id="my-app">
  <template>
    Name from App: {{data.name}}
    <br>
    <my-form name={{data.name}}></my-form>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'my-app',
    properties: {
      data: {
        type: Object
      }
    }
  });
</script>



<dom-module id="my-form">
  <template>
    Name from Form: {{name}}
    <br>
    <my-name name={{name}}></my-name>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'my-form',
    properties: {
      name: {
        type: String
      }
    }
  });
</script>

<dom-module id="my-name">
  <template>
    Name from Name: {{name}}
  </template>
</dom-module>
<script>
  Polymer({
    is: 'my-name',
    properties: {
      name: {
        type: String
      }
    }
  });
</script>


<my-app data='{"name":"User1"}'></my-app>

Databind iron-ajax JSON response entry to nested Polymer custom elements

1 Answers