Yelp Api, Oauth And Angular With Jsonp Only Works Once

So this question has been asked several times, but I believe I've finally boiled down exactly what goes wrong here. I'm using the Yelp API with Angular, which requires OAuth 1.0a t

Solution 1:

I kind of find an ugly way to solve the problem. In following post, there is a description of how to create your own interceptor to increment the jsonp callback parameter (angular.callbacks._0, angular.callbacks._1, etc.)

how to custom set angularjs jsonp callback name?

One to one this solution didn't work in my case. With yelp and queries where you have to create a oauth signature, the param callback should be included in the signature respectively should then be already incremented before doing the jsonp request.

So what I did, in my service, before doing the signature and before doing the jsonp request, I just call the counter to generate the new increment.

In your case, I would then suggest to change your code like following:

var retrieveYelp = function (name, callback) {

// GENERATE increment and use it in the paramsvar callbackId = angular.callbacks.counter.toString(36);

      var method =  'GET';
      var url =     'http://api.yelp.com/v2/search';
      var params = {
        callback:                 'angular.callbacks._' + callbackId,
        ll:                       /* hidden */,
        radius_filter:            '3219',
        oauth_consumer_key:       /* hidden */, // consumer keyoauth_token:              /* hidden */, //Tokenoauth_signature_method:   'HMAC-SHA1',
        oauth_timestamp:          newDate().getTime(),
        oauth_nonce:              randomString(32, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'),
        term:                     name || 'food', 
        actionlinks:              true
      };

I found that solution not super duper, I'm agree, but well then at least it works and doesn't seems to have side effects.