iron-jsonp-library, iron-ajax and the bigstockphoto.com API

[Doug White]

Hi All,

New to Polymer (and fairly new to web development if i'm honest). I'm trying to build a component to connect and manage the Big Stock Photo api.

Heres the api call

http://api.bigstockphoto.com/2/<account id>/search/?q=<query>

and for JSONP

http://api.bigstockphoto.com/2/<account id>/search/?q=<query>&callback=%%callback%%

However i'm having a heap of problems trying to get this to work.

1) Heres my iron-jsonp-library attempt

      <iron-jsonp-library
          library-url="http://api.bigstockphoto.com/2/{{accountId}}/search/?callback=%%callback%%&q={{query}}"
          notify-event="api-load"
          library-loaded="{{loaded}}">
      </iron-jsonp-library>

it appears to work fine until the query contains space characters, at which point I get the following error message

e.g Searching "blue background" error begins happening as soon as i hit the space character

Uncaught SyntaxError: Unexpected identifier

?callback=http___api_bigstockphoto_com_2_<account id>_search__callback___callback___q_blue background_api…:1 Uncaught SyntaxError: Unexpected identifier

It appears to be due to adding spaces into the callback method name.

2) My iron-ajax attempt failed due to 'No Access-Control-Allow-Origin' headers not being present

  <iron-ajax
      auto
      url="http://api.bigstockphoto.com/2/{{accountId}}/search/q={{query}}"
      on-response="apiLoad"
      debounce-duration="300">
  </iron-ajax>

3) Searching google for "iron ajax Access-Control-Allow-Origin" led me to this link:

http://stackoverflow.com/questions/31130939/how-to-solve-no-access-control-allow-origin-in-polymer-project

Which discussed using the byutv-jsonp element like so :

      <byutv-jsonp
          auto
          url="http://api.bigstockphoto.com/2/{{accountId}}/search/"
          params='{"q" : "{{query}}"}'
          on-response="apiLoad"
          debounce-duration="300">
      </byutv-jsonp>

But now i get a weird error message and it spits out a url like this (search "blue background")

GET http://api.bigstockphoto.com/2/<account id>/search/?0=%22&1=q&2=%22&3=%20&4=%3A&5…0=e&11=%20&12=b&13=a&14=c&15=k&16=g&17=r&18=o&19=u&20=n&21=d&22=%22&23=%7D 

I'm not sure how to proceed and I don't know enough about polymer or jsonp to know the best way to handle this.

Any help would be greatly appreciated.

[Daniel Llewellyn]

> On 4 Dec 2015, at 06:57, Doug White <doug....@versatechit.com.au> wrote:
>
> 1) Heres my iron-jsonp-library attempt
>
>
> <iron-jsonp-library
> library-url="http://api.bigstockphoto.com/2/{{accountId}}/search/?callback=%%callback%%&q={{query}}"
> notify-event="api-load"
> library-loaded="{{loaded}}">
> </iron-jsonp-library>
>
> it appears to work fine until the query contains space characters, at which point I get the following error message

I believe the best way to achieve this would be to use a function to URL-Encode the variables.

<iron-jsonp-library library-url=“[[_encodeLibraryUrl(accountId,query)]]” .. ></iron-jsonp-library>

with a supporting _encodeLibraryUrl function as follows:

_encodeLibrary_url: function(accountId, query) {
return “http://api.bigstockphoto.com/2/“ + encodeURIComponent(accountId) + “/search/?callback=%%callback%%&q=“ + encodeURIComponent(query);
}

Hope this helps.

[Doug White]

Thanks Daniel, that worked perfectly. I also added a debounce in an observer as well, giving me perfectly what i wanted. Cheers

Thanks again!

Final code:

iron_jsonp-library

      <iron-jsonp-library

          library-url="[[_encodeLibraryUrl(accountId, _query)]]"

          notify-event="api-load"

          library-loaded="{{loaded}}">

      </iron-jsonp-library>

query prop with observer

     query: {

                type: String,

                value: '',

                notify: true,

                observer: '_queryChanged'

            },

the observer

_queryChanged: function() {

            if (this.query != '')

                this.debounce('_setQuery',function() {

                    this._query = this.query;

                }, 500);

        },

the encode method

        _encodeLibraryUrl: function(accountId, query) {

            return "http://api.bigstockphoto.com/2/" + encodeURIComponent(accountId) + "/search/?callback=%%callback%%&q=" + encodeURIComponent(query);

        },

Thanks again Daniel!