angular using jsonp - unexpected token

Question

When i call "http://api.trademe.co.nz/v1/Search/Property/Residential.xml" using Jsonp I get an unexpected token error.

I'm using the code below to call the api

$http.jsonp("http://api.trademe.co.nz/v1/Search/Property/Residential.json?callback=?").success((data) => {

                console.log(data);
            });

Any idea why i am getting this error? is that the correct way of calling jsonp service?

Request Header: enter image description here

sylwester · Accepted Answer · 2014-10-21 09:44:03Z

1

It seams that you can call api.trademe.co.nz using http.get please see demo below.

var app = angular.module('app', []);

app.controller('fCtrl', function($scope, $http) {


  $http.get("http://api.trademe.co.nz/v1/Search/Property/Residential.json").then(function(response) {
    console.log(response.data)
    $scope.data = response.data
  });


});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="fCtrl">
    <p ng-repeat="item in data.List">
      {{item.Title}}
    </p>
  </div>
</div>

edited Oct 21, 2014 at 9:44

answered Oct 21, 2014 at 9:28

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Raju Kumar Over a year ago

Hi Thanks for reply. I seem to be getting the following error when i try it: XMLHttpRequest cannot load api.trademe.co.nz/v1/Search/Property/Residential.json. Invalid HTTP status code 405

sylwester Over a year ago

@RajuKumar are you using exactly this same code sample which is in answer ?

Raju Kumar Over a year ago

I'm using the following code in a button event: $http.get("api.trademe.co.nz/v1/Search/Property/… (response) { console.log(response.data); });

sylwester Over a year ago

@RajuKumar that's really wired I've updated answer and everything is working

Raju Kumar Over a year ago

It's working when i run it outside my application. I've attached the request header which is sent when making the request. Do you see anything odd in it?

|

Artem Verbo · Accepted Answer · 2014-12-10 07:16:05Z

Probably not actual anymore, but would be useful for someone else maybe. The thing is you are not sending GET request as required by Trademe API, but as you add custom headers (in Trademe case you probably send oAuth header) to a potential GET request, browser sends another what's called "preflight request" which is OPTIONS request, as per your screenshot you can see Method is OPTIONS. And ideally Trademe should correctly respond back on that to allow the GET request with custom headers itself. Probably it's not happening because of a security measures. By the way you shouldn't send Auth keys/secrets from the client browser app anyway as it's exposed. It was a bit annoying for me too as I wanted to do a quick test from a client js app without proxying to a backend, but to solve this one of the solutions (which worked for me) was using a "backend" proxy call. So your browser app calls say some node/php script which does a Trademe API call and returns the result to the browser.

More about CORS and preflight requests: http://www.html5rocks.com/en/tutorials/cors/#toc-types-of-cors-requests

Collectives™ on Stack Overflow

angular using jsonp - unexpected token

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related