jquery.post and variable scope

Question

I'm new to javascript and have the following problem. I want to load some json from an api.php and succeed with the returned value to fill my GUI.

    $( '#data_button' ).click(function() {
    $.post( 'api.php', function( data ) { json = data; });
    $('#data1').empty().append( json[0].name + ' | ' + json[1].name );
});

So I wanna click a button, then it fetches via post some data ans save this to the variable data. As it should be an object (json object?) I thought I just can use it as above... But that doesn't work. Console say: can't find variable json.

Any hints?

This doesn't have anything to do with scope, only with timing. Please have a look at How to return the response from an AJAX call? — Felix Kling
– Felix Kling, Commented Nov 29, 2013 at 22:10
I'd suggest you to read about asynchronous programming and JavaScript's function scope. — Adonis K. Kakoulidis
– Adonis K. Kakoulidis, Commented Nov 29, 2013 at 23:10

Noampz · Accepted Answer · 2013-11-29 23:13:07Z

2

jquery post as default works asynchronously which means that the line:

$('#data1').empty().append( json[0].name + ' | ' + json[1].name );

occur before the post request have returned the data.

this how it should be done:

$( '#data_button' ).click(function() {
     $.post( 'api.php', function( data ) { 
         $('#data1').empty().append( data[0].name + ' | ' + data[1].name );
     });
});

answered Nov 29, 2013 at 23:13

Noampz

1,2153 gold badges12 silver badges19 bronze badges

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

1 Comment

marschro Over a year ago

Thanks to all of you! It was just too late... and too obvious.

Malk · Accepted Answer · 2013-11-29 22:01:59Z

2

You have your appending outside the post callback function. Try this:

$( '#data_button' ).click(function() {
    $.post( 'api.php', function( data ) { 
        json = data; 
        $('#data1').empty().append( json[0].name + ' | ' + json[1].name );
     });
});

answered Nov 29, 2013 at 22:01

Malk

12k4 gold badges35 silver badges34 bronze badges

Collectives™ on Stack Overflow

jquery.post and variable scope

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