How can I pass parameters to a jQuery $.getJSON callback method?

Question

I'm trying to use jQuery to call some custom API via Ajax/$.getJSON.

I'm trying to pass a custom value into the Ajax callback method, but that value is not getting passed through and is actually getting overwritten. This is my code:

var locationType = 3;
var url = 'blah blah blah' + '&locationType=' + locationType;

$("#loading_status").show();

$.getJSON(url, null, function(results, locationType) {
    searchResults(results, locationType)
});

The value of locationType BEFORE I call the URL using AJAX is 3. But after the call returns the data successfully, the value for locationType is now success. This is because the method signature of the callback is:

callback(data, textStatus)A callback function that is executed if the request succeeds.

How can I pass 1 or more parameters to a callback method?

locationType variable is global variable so you don't need to put it as parameter, in anonimus callback function that variable is free so it is search in surrounding environment which in this case is global environment. — jcubic
– jcubic, Commented Aug 7, 2010 at 12:23
@jcubic - It's not a global variable (well it might be, but probably not), more accurately it's available in the scope he's concerned about. — Nick Craver
– Nick Craver, Commented Aug 7, 2010 at 12:26

Nick Craver · Accepted Answer · 2010-08-07 12:23:58Z

20

You don't need to pass it in, just reference the variable you already have, like this:

var locationType = 3;
var url = 'blah blah blah' + '&locationType=' + locationType;
$("#loading_status").show();
$.getJSON(url, null, function(results) {
    searchResults(results, locationType)
});

Also there's no need to pass null if you don't have a data object, it's an optional parameter and jQuery checks if the second param is a function or not, so you can just do this:

$.getJSON(url, function(results) {
    searchResults(results, locationType)
});

answered Aug 7, 2010 at 12:23

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

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

3 Comments

Dani bISHOP Over a year ago

You must be careful with this. For a fixed value variable this is useful, but if you try to do this, for example, inside a loop where locationType is the index, its value inside the callback will be the value at the moment of the callback execution, not the value at definition. Just in case!

Espen Over a year ago

@DanibISHOP: And how would you pass a none fixed value?

mitchken Over a year ago

non fixed values might be usefull if you do a lot of API calls and then still need to know which call originated from which ID you are loading

Felix Kling · Accepted Answer · 2010-08-07 12:23:50Z

19

Warp in a function, e.g.

function getResults(locationType) {
    $.getJSON(url, null, function(results) {
        searchResults(results, locationType)
    });
}

But in you specific situation you don't even have to pass it, you can access the value directly in the callback.

answered Aug 7, 2010 at 12:23

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

1 Comment

yee379 Over a year ago

if you are doing a loop and calling $.getJSON() each time, then wrapping it a function will preserve the variable; otherwise, it will be overridden.

Jean-François Beauchamp · Accepted Answer · 2014-09-17 22:02:23Z

4

You could use the .ajax method:

var locationType = 3;
var url = 'blah blah blah' + '&locationType=' + locationType;
$.ajax({
    url: url,
    context: { lt: locationType },
    success: function(results) {
        searchResults(results, this.lt);    
    }
});

edited Sep 17, 2014 at 22:02

Jean-François Beauchamp

5,6458 gold badges47 silver badges77 bronze badges

answered Aug 7, 2010 at 12:24

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

2 Comments

Jean-François Beauchamp Over a year ago

I believe there is an error in the code above. When using the context setting, "this" becomes the context in the callback function, so the code should read searchResults(results, this.lt); instead of searchResults(results, this.context.lt);. I already made the correction above.

Ashi Over a year ago

If this ajax call gets called multiple times (and possibly before the previous call returns), then this is the only correct solution.

Pekka · Accepted Answer · 2010-08-07 12:22:59Z

2

If you want to use locationType (whose value is 3) in the callback, simply use

function(results) { .....

thanks to closures, locationType will be automatically available in the callback.

answered Aug 7, 2010 at 12:22

Pekka

451k150 gold badges989 silver badges1.1k bronze badges

Comments

Smittey · Accepted Answer · 2016-06-10 16:16:10Z

0

Could try:

function getResults(locationType) {
    $.getJSON(url, {p1:'xxx', p2: 'yyy'}, function(results) {
        searchResults(results, locationType)
    });
}

edited Jun 10, 2016 at 16:16

Smittey

2,49010 gold badges29 silver badges35 bronze badges

answered Jun 10, 2016 at 15:29

user6450793

1

Comments

Oris Sin · Accepted Answer · 2021-04-20 23:47:45Z

0

$.getJSON("url",
        "//here you can define your id, secure key to check data in your console, if you don't have condition for id and secure key just remove the secure key part."
        {secure_key:"noaccess"}, function(data){
            console.log(data);
});

edited Apr 20, 2021 at 23:47

Oris Sin

1,2501 gold badge18 silver badges40 bronze badges

answered Apr 20, 2021 at 12:11

Asim Sharif

11 bronze badge

Collectives™ on Stack Overflow

How can I pass parameters to a jQuery $.getJSON callback method?

6 Answers 6

3 Comments

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related