Can you add headers to getJSON in jQuery?

Question

ive been looking to get JSON data for pinterest but notice they currently dont let you get for a user and a specific board so found mashape and i need to get the API key but using header request can this be done using getJSON? current code is:

I need to pass: "X-Mashape-Key: KEY_HERE" i see it can be done in ajax but dont know how to rewrite the getJSON as the loop to that but can see here:

http://blog.mashape.com/mashape-sample-code-executing-ajax-request-using-jquery/

$.getJSON(settings.apiPath + settings.username + '/boards/', function (data) {
            beforeSend: setHeader,
            console.log(data);

            for (var i = 0; i < settings.count; i++) {
                var feed = false;
                if(data.data[i]) {
                    feed = data.data[i];
                }

                var temp_data = {
                    message: truncate(feed["message"], 100),
                    url: feed["link"]
                };

                $('#pinterestFeed ul').append('<li class="feed">' + templating(temp_data) + '</li>');
            }
            $(".pinterest #loading").hide();  
        });

Nazi

You can simply use $.ajax()? – Coinsure

Yes i know, but not sure how to rewrite the one i made already in getJSON purly down to the loop data, kind of new to this – Nazi

You can use $.ajaxSetup() to set options for all future AJAX calls. – Nuclease

Answer 1

$.getJSON is a shorthand for

$.ajax({
    dataType: "json",
    url: url,
    data: data,
    success: success
});

So you can simply use it directly like

$.ajax({
    beforeSend: function(request) {
        request.setRequestHeader("X-Mashape-Key", 'key_here');
    },
    dataType: "json",
    url: settings.apiPath + settings.username + '/boards/',
    success: function(data) {
        //Your code
    }
});

Coinsure

headers was added in jQuery 1.5, so you can specify key/value pairs there rather than providing a beforeSend callback. – Yodle

Answer 2

using $.ajax() would have been better, as $.getJSON is shorthand function, if you cant use $.ajax(), you can use $.ajaxSetup to set headers, as:

$.ajaxSetup({
  headers : {   
    'X-Mashape-Key' : 'key_here'
  }
});
$.getJSON(settings.apiPath + settings.username + '/boards/', function (data) {
 ...

But note that it sets headers for future Ajax requests.

Anticlimax

Good answer. Didn't know about ajaxSetup! Although $.ajax is a cleaner solution, this is actually what the OP asked for. – Oballa

Documentation says this is not a recommended way. – Tail

Answer 3

Since getJSON is a shortcut notation for $.ajax() why not use that

$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: success
});

ajax() provides a hook called which you can specify by beforeSend: function(jqXHR, settings)

The hook allows one to add custom headers to outgoing AJAX request ... I think unlike $.ajaxSetup ... you do not have to worry about unsetting after using it

Cellarer

Answer 4

Don't think you can set headers on getJSON. http://api.jquery.com/jQuery.getJSON/

Coastland