I have an iron-ajax with an object response, but the name is dynamic

Question

The thing is that this object name changes from an array list, and i dont really understand how could i bind them. I want to extract the id from the response and profileIconId. It would be simple for one user, but i have a lot of them. Thank you in advance for the help!

This is my code:

 <link rel="import" href="../bower_components/polymer/polymer.html">
    <link rel="import" href="shared-styles.html">
    <link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
    <dom-module id="my-summoner">
      <template>
        <style>
          :host {
            display: block;
          }
        </style>
        <iron-ajax
          auto
          url="[[_summonerName(name)]]"
          handle-as="json"
          last-response="{{names}}"></iron-ajax>
            <h1>[[name]]</h1>
            <span>{{names.~dynamic user name~.name}}</span>
      </template>

      <script>
        Polymer({
          is: 'my-summoner',
          properties: {
            name: {
              type: String,
              value: '',
              notify: true
            },
          },
          _summonerName: function(name){
            return 'https://api.leagueofzabalt.club/summoner/by-name/' + name;
          }
        });
      </script>
    </dom-module>

This is the response:

{"lordfumeitor": {
   "id": 19347567,
   "name": "lord fumeitor",
   "profileIconId": 1385,
   "revisionDate": 1479073568000,
   "summonerLevel": 30
}}

Answer 1

It seems that iron-ajax doesn't know how to handle objects as responses. The one work-around is to use the results value in the api return and force it into a dom repeat template, since it corresponds with an array, albeit of a single object. The response would look something like this:

results: [
  {
    "lordfumeitor": {
      "id": 19347567,
      "name": "lord fumeitor",
      "profileIconId": 1385,
     "revisionDate": 1479073568000,
     "summonerLevel": 30
    }
  }
]

Assuming you're grabbing name from the element like so:

<my-summoner name="lordfumeitor"></my-summoner>

You would then be able to grab the returned data and output it to a template:

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="shared-styles.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<dom-module id="my-summoner">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <iron-ajax
      auto
      url="[[_summonerName(name)]]"
      handle-as="json"
      on-response="responseHandler">
    </iron-ajax>
    <template is="dom-repeat" items=[[data]]>         
      <h1>[[data.name]]</h1>
      <span>[[data.name.id]]</span>
      <span>[[data.name.profileIconId]]</span>
    </template>
  </template>

  <script>
    Polymer({
      is: 'my-summoner',
      properties: {
        name: String,
      },
      created: function() {
        name = this.getAttribute('name');
      },
      _summonerName: function(name){
        return 'https://api.leagueofzabalt.club/summoner/by-name/' + name;
      },
      responseHandler: function(request) {
        data = JSON.parse(request.detail.response);
        return this.data = data.results;
      }
    });
  </script>
</dom-module>