How to get JSONP data as a javascript object

Question

I'm trying to get JSONP data so I can parse it in javascript. I have some mock data that I am able to parse which looks like this:

var employees = [
    { "Cost": 50, "Date": "2014-05-25T00:00:00", "Distance": "5k", "Id": "137", "Location": "Salt Lake City", "Name": "Employee 1", "Type": "normal" },
    { "Cost": 50, "Date": "2014-05-25T00:00:00", "Distance": "5k", "Id": "138", "Location": "Provo", "Name": "Employee 2", "Type": "normal" },
    { "Cost": 50, "Date": "2014-05-25T00:00:00", "Distance": "5k", "Id": "139", "Location": "Ogden", "Name": "Employee 3", "Type": "normal" }
];

But when I try to get the same data from a RESTful API on another server using JSONP it doesn't work. I would like to be able to get the data in the same format as the mock data. I don't know if the way I'm requesting it is wrong, but that is what I suspect because the data is there, and in JSONP format. Here is how I'm requesting it:

var employees;
var url = 'http://marketing.wasatchtechies.com/api/JSONraces/callback=?';

$.ajax({
    type: 'GET',
    url: url,
    async: true,
    contentType: "application/json",
    dataType: 'jsonp',
    success: function (data) {
        employees = data;
    },
    error: function (err) {
        // nothing
    }
});

Thanks for taking a look.

Edit: when you follow this link http://marketing.wasatchtechies.com/api/JSONraces?callback=foobar you get the following:

foobar([{"id":137,"name":"JE Cosgriff Tiger Trot","location":"Salt Lake City","date":"2014-05-25T00:00:00","url":"http://www.utahrunning.com/events/race/ref/JE-Cosgriff-Tiger-Trot","distance":"5k","cost":"50        ","type":"normal"},{"id":138,"name":"Race for Grief Event","location":"West Bountiful","date":"2014-05-26T00:00:00","url":"http://www.utahrunning.com/events/race/ref/Race-for-Infant--Pregnancy-Loss---10K-run--2-mile-awareness-walk","distance":"5k","cost":"45        ","type":"normal"},{"id":139,"name":"Heber Valley Memorial Run","location":"Heber City","date":"2014-05-26T00:00:00","url":"http://www.utahrunning.com/events/race/ref/Heber-Valley-Memorial-Run","distance":"5k, mile","cost":"35        ","type":"glow"}]);

wheres your callback function? JSONP works by including a script into your page that will call a function with your data as arguments to the function. jQuery will automatically map this if you have `callback=?` in the url and will use the function set in option `success` — Patrick Evans, Jul 03 '14 at 17:29
you need a success funcion and then assign employees to the responseText — juvian, Jul 03 '14 at 17:30
Thanks for your comments, I just edited my code based on your comments, and it still isn't working. Did I implement your comments correctly? — JBaczuk, Jul 03 '14 at 17:37
async: false doesn't work with jsonp. stop using async false. — Kevin B, Jul 03 '14 at 17:44
We need to see the actual response from the server when you visit it with the following url: `http://marketing.wasatchtechies.com/api/JSONraces/callback=foobar`. If it doesn't match `foobar()` then the service doesn't support jsonp at that endpoint. — Kevin B, Jul 03 '14 at 17:45
Trying to open the link in my browser, all I see is `Bad Request`. That might be the reason why it's not working. — SeinopSys, Jul 03 '14 at 17:47
@jeekonline that makes no sense. there is no json to parse. this is a jsonP request, not json.. — Kevin B, Jul 03 '14 at 17:47
additionally, contentType is ignored for jsonp requests for the same reason async is. — Kevin B, Jul 03 '14 at 17:50
@KevinB I just added the response as an edit. Sorry I didn't realize the danger. — JBaczuk, Jul 03 '14 at 17:53
Looks like it should work then. [Just keep in mind that ajax is asynchronous](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call?rq=1). — Kevin B, Jul 03 '14 at 17:54
This still isn't working, so I think it may be a phonegap thing, as this is a phonegap project. Here is the link to the new question: http://stackoverflow.com/questions/24563256/jsonp-adapter-phonegap-project-not-working — JBaczuk, Jul 03 '14 at 21:03

dave · Accepted Answer · 2014-07-03T18:01:11.643

3

You just set it in the callback:

var employees;

$.ajax({
  type: 'GET',
  url: url,
  contentType: "application/json",
  dataType: 'jsonp',
  success: function(data) {
    employees = data; 
  }
});

edited Jul 03 '14 at 18:01

answered Jul 03 '14 at 17:31

dave

62,300
5
72
93

2

the DOC says: `Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation` – A. Wolff Jul 03 '14 at 17:33

score 1 · Answer 2 · answered Jul 03 '14 at 17:33

You are missing the callback method

success and error method in your ajax request. Something like this

var employees = $.ajax({
    type: 'GET',
    url: url,
    async: false,
    contentType: "application/json",
    dataType: 'jsonp',
    success: function(result) {
        // access your mock data in result
    },
    error: function(err) {
         // acces err object to handle the error
    }
});

How to get JSONP data as a javascript object

2 Answers2