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
– Patrick Evans, Commented Jul 3, 2014 at 17:29
you need a success funcion and then assign employees to the responseText — juvian
– juvian, Commented Jul 3, 2014 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
– JBaczuk, Commented Jul 3, 2014 at 17:37
async: false doesn't work with jsonp. stop using async false. — user400654
– user400654, Commented Jul 3, 2014 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(<array or object here>) then the service doesn't support jsonp at that endpoint. — user400654
– user400654, Commented Jul 3, 2014 at 17:45

dave · Accepted Answer · 2014-07-03 18:01:11Z

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 3, 2014 at 18:01

answered Jul 3, 2014 at 17:31

dave

65.1k6 gold badges81 silver badges98 bronze badges

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

1 Comment

A. Wolff Over a year ago

the DOC says: Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation

Ashima · Accepted Answer · 2014-07-03 17:33:58Z

1

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
    }
});

answered Jul 3, 2014 at 17:33

Ashima

4,8546 gold badges43 silver badges65 bronze badges

Collectives™ on Stack Overflow

How to get JSONP data as a javascript object

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related