Access JSON array objects in jquery using .each

Question

I have a series of JSON arrays each with objects inside of and one of these arrays is selected on a .change function and the arrays are within if statements.

var country_data;

$("#job").change(function () {
    selectedValue = $("#job option:selected").val();

    if (selectedValue == "job_1") {

        country_data = [{
            "country_id": 1,
                "country": "Luxembourg",
                "local_wage": "407",
                "wage": "489",
                "exchange": "0.98"
        }, {
            "country_id": 2,
                "country": "Norway",
                "local_wage": "3200",
                "wage": "378",
                "exchange": "9.57"
        }, {
            "country_id": 3,
                "country": "Austria",
                "local_wage": "290",
                "wage": "337",
                "exchange": "0.87"
        }];


    } else if (selectedValue == "job_2") {

        country_data = [{
            "country_id": 1,
                "country": "Luxembourg",
                "local_wage": "874",
                "wage": "654",
                "exchange": "0.24"
        }, {
            "country_id": 2,
                "country": "Norway",
                "local_wage": "741",
                "wage": "365",
                "exchange": "4.77"
        }, {
            "country_id": 3,
                "country": "Austria",
                "local_wage": "854",
                "wage": "634",
                "exchange": "0.43"
        }];


    } else if (selectedValue == "job_3") {

        country_data = [{
            "country_id": 1,
                "country": "Luxembourg",
                "local_wage": "854",
                "wage": "985",
                "exchange": "0.25"
        }, {
            "country_id": 2,
                "country": "Norway",
                "local_wage": "645",
                "wage": "874",
                "exchange": "5.55"
        }, {
            "country_id": 3,
                "country": "Austria",
                "local_wage": "201",
                "wage": "256",
                "exchange": "0.78"
        }];

    }
}).change();

I also have a function that uses .each to access the chosen array data however I cannot seem to get it to access the data within the selected JSON array.

//variable country_data below wont access the selected array
    $.each(country_data, function(i) {
                        var regEx = new RegExp('^' + searchStr + '\\w*\\b','i');

                        if (country_data[i].country.match(regEx) ||
                            (i == 3 && searchStr.toLowerCase() == "us") ||
                            (i == 4 && ((searchStr.toLowerCase() == "uk") ||
                                        ("Great Britain".match(regEx)) ||
                                        ("Britain".match(regEx)) ||
                                        ("England".match(regEx)) ||
                                        ("Wales".match(regEx)) ||
                                        ("Scotland".match(regEx)) ||
                                        ("Northern Ireland".match(regEx))
                                       )
                             )
                            )
                                            $suggestionList.append('<li class="country_result" role="option"><a href="#'+country_data[i].country_id+'">' + country_data[i].country + '</a></li>');

                        if (country_data[i].country.toLowerCase() === searchStr.toLowerCase()) {
                            exactMatch = true;
                            select_current_country(i+1);
                            return;
                        }
                    });

I'm getting the error 'Cannot read property 'length' of undefined'. How to I modify the .each function so that I can gain access to the object data? Any help is really appreciated! Thanks

Answer 1

Because your variable country_data will be undefined when script runs first. Don't use ifelse - use switch.