Polymer iron-ajax element params with databinding is splitting the parameter into single chars

Question

I have a problem with Polymers iron-ajax element. When calling it like this:

 <iron-ajax url="https://api.onedrive.com/v1.0/drive/root" params='{"access_token":"[[access_token]]"}'></iron-ajax>

It sends a url like this, splitting the whole params string into multiple parameters:

https://api.onedrive.com/v1.0/drive/root?0="&1=a&2=c&3=c&4=e&5=s&6=s&7=_&8=t&9=o&10=k&11=e&12=n&13="...

When using a normal String as parameter it works correctly so i guess the quotes are correct.

The script part of the Element which uses iron-ajax:

<script>

  Polymer({
  is: 'onedrive-files',
  properties: {
    access_token: String
  },

  ready: function() {
  },
});
</script>

and i am calling the element like this:

<onedrive-files access_token="testtoken">
</onedrive-files>

Does anyone have any ideas? Thanks!

Edit: With an getter Function:

    <dom-module id="onedrive-files">
      <template>
    <iron-ajax id="ajax" url="https://api.onedrive.com/v1.0/drive/root" last-response="{{data}}" params='{{_getParams()}}' auto></iron-ajax>
  </template>
   <script>
     Polymer({
      is: 'onedrive-files',
      properties: {
        access_token: String
      },

      _getParams: function()
      {
        return ('{"access_token":"' + this.access_token + '"}');
      },

      ready: function() {
        this.$.ajax.generateRequest();    
    },
    });

    </script> 
    </dom-module>

With setting the Param in the Ready function:

<dom-module id="onedrive-files">
  <template>
    <iron-ajax id="ajax" url="https://api.onedrive.com/v1.0/drive/root" last-response="{{data}}" auto></iron-ajax>
  </template>

  <script>

    Polymer({
      is: 'onedrive-files',
      properties: {
        access_token: String
      },

      ready: function() {
        this.$.ajax.params = '{"access_token":"' + this.access_token + '"}';
    },
    });

  </script>
</dom-module>

Tessie

Same problem here. Unfortunately it messes up my query too, but I think this should be fixed in future versions. – Repression

I'm facing the same problem with iron ajax 2.0! I wonder what gives. – Callicrates

Answer 1

It seems like this is another limitation of dynamic attributes. So, the usual fallback for such cases are getter functions :

 <iron-ajax url="https://api.onedrive.com/v1.0/drive/root" params='{{_getParams(access_token)}}'></iron-ajax>

...

<script>

  Polymer({
  is: 'onedrive-files',
  properties: {
    access_token: String
  },
  _getParams:function(access_token) {
       return {access_token:access_token};
  }
});
</script>

Turves

Answer 2

The params property is an Object, and it looks like the parsing from the html attribute (which is String) only happens on attached.

IMHO the easiest solution is to set it before you generate the request. But set an Object, not an String. It will generate one GET param foreach element of the params Object, a String is a list of characters, so one GET param for each character...

this.$.myAjaxElement.set( 'params', {"access_token": this.access_token });
this.$.myAjaxElement.generateRequest();

Apicella