jquery variable scope from $.each

Question

I have this AJAX call to a php function from jquery.
On change of a select box I call do the fetching of data (which comes 100% from php).
I then enter the $.each area to process the data into a list.
The list is generates in the txt variable, but its scope is only for the $.each block.

How can I pass it back to the outside (second console.log(txt);)

$('#selectMain').on('change', function(){
    var txt = '';
    var argument = $('#selectMain').val();
    $.ajax({
        type: 'POST',
        url: './inc/ListManagerScripts.php?argument='+argument,
        success: function(json){
            var countries = [];
            var countries_uuid = [];

            data = $.parseJSON(json);

            $.each(data, function(key, value) {

                //append countries
                if($.inArray( value.country_uuid, countries_uuid ) == -1 ){
                    countries.push(value.country);
                    countries_uuid.push(value.country_uuid);
                    var txt = txt + addCountry(value.country, value.country_uuid);
                }

                console.log(txt);
            });
            console.log(txt);

        }
    });



    var addCountry = function(country, uuid){
        var snip = '';
        snip = snip + "<div class='expandListHeader'>";
        snip = snip + "<div class='expandListHeaderRow' ctryID='"+uuid+"'>"+country+"</div>";
        snip = snip + "</div>"
        snip = snip + "<div class='expandListContent'>";
        snip = snip + "<div class='expandListContentRow contentCol2'>";
        snip = snip + "</div>";
        snip = snip + "</div>";
        return snip;

    }


});

@APerson Ha! I didn't even notice that. Yeah, so that problem is that it's being redeclared within the $.each (as one of the answers states) — Patrick Q
– Patrick Q, Commented Oct 22, 2014 at 13:07
Tip, add dataType: 'json' to the ajax call. No json parsing is needed than. — Barry
– Barry, Commented Oct 22, 2014 at 13:07

Shane IvoKid Reid · Accepted Answer · 2014-10-22 13:37:06Z

7

Change

var txt = txt + addCountry(value.country, value.country_uuid);

to

txt = txt + addCountry(value.country, value.country_uuid);

You're redeclaring the variable inside the scope of the $.each callback, so if you take out the declaration you'll be using the one declared inside the on callback.

Edit:

Relevant Reading

edited Oct 22, 2014 at 13:37

answered Oct 22, 2014 at 13:06

Shane IvoKid Reid

3951 silver badge5 bronze badges

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

1 Comment

Shane IvoKid Reid Over a year ago

As a side-note, you can use "txt += ..." instead of "txt = txt + ..."

rjdown · Accepted Answer · 2014-10-22 13:06:52Z

2

Declare var txt; before the function.

Inside the function, use txt = ... and not var txt = ...

This will then reuse the same variable.

answered Oct 22, 2014 at 13:06

rjdown

9,2073 gold badges35 silver badges48 bronze badges

Comments

Vijay · Accepted Answer · 2014-10-22 13:08:59Z

As you have declared the var txt in the $.each block so its scope is inside the that block.

To make the txt outside the $.each block change as following

var txt;         
$.each(data, function(key, value) {

                //append countries
                if($.inArray( value.country_uuid, countries_uuid ) == -1 ){
                    countries.push(value.country);
                    countries_uuid.push(value.country_uuid);
                     txt = txt + addCountry(value.country, value.country_uuid);
                }

                console.log(txt);
            });

You are redeclaring the txt variable again in the $.each function. If you want it for all the array elements then you to go with another array.

Collectives™ on Stack Overflow

jquery variable scope from $.each

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related