Getting a 'Cannot find variable' error trying to access a json object

Question

hopefully somebody can help me. The JS below, loads a JSON file and parses the counties into a select menu. It also removes duplicates. Now in the JSON feed, each item has something like this:

{
   "County":"Antrim",
   "Town":"Antrim Town",
   "Restaurant":"Diane's Restaurant & Pizzeria"
}

What I am trying to do is in the first select menu, once the user chooses the county, the second select menu is updated with values from the son object. At the moment I'm getting a 'Cannot find variable' error and I can't work out why. Is the data array not available for some reason?

<script type="text/JavaScript">
    $(document).ready(function(){
    //get a reference to the select elements
    var county = $('#county');
    var town = $('#town');
    var restaurant = $('#restaurant');

    //request the JSON data and parse into the select element
    $.getJSON('rai.json', function(data){
        console.log(data);

        //clear the current content of the select
        $('#county').html('');
        $('#county').append('<option>Please select county</option>');

        $('#county').html('');
        $('#town').append('<option>Please select town</option>');

        $('#restaurant').html('');
        $('#restaurant').append('<option>Please select restaurant</option>');

        //iterate over the data and append a select option
        $.each(data.irishtowns, function(key, val) {
            county.append('<option id="' + val.County + '">' + val.County+ '</option>');
        });

        var a = new Array();
        $('#county').children("option").each(function(x){
            test = false;
            b = a[x] = $(this).text();
            for (i=0;i<a.length-1;i++){
                if (b ==a[i]) test =true;
            }
            if (test) $(this).remove();
        });
    });

    $( "#county" ).change(function() {
        var myCounty = $(this).val();
        console.log(myCounty);
        $.each(data.irishtowns, function(key, val) {
            if (val.Town === myCounty) {
                town.append('<option id="' + val.Town + '">' + val.Town + '</option>');
            }
        });
    });
});
</script>

What is the exact error message? And which line of the Javascript is it happening on? — Barmar
– Barmar, Commented Jan 8, 2016 at 17:33
Does the console identify which variable in your script there that it is unable to locate? — Korgrue
– Korgrue, Commented Jan 8, 2016 at 17:34
Typo, copy error or what is 'data.irishtowns' ? When you dump the json, is it an object or a string? — axel.michel
– axel.michel, Commented Jan 8, 2016 at 17:34
Another thing, where did you initialize your "b" var? I see you reference it a number of time, but I don't see where you actually create the variable. — Korgrue
– Korgrue, Commented Jan 8, 2016 at 17:37
I think I see the problem. You're declaring the data variable here: $.getJSON('rai.json', function(data){. Then trying to access it again in $( "#county" ).change(function() {. In this location, data can't be seen. — Drew Kennedy
– Drew Kennedy, Commented Jan 8, 2016 at 17:37

Simon H · Accepted Answer · 2016-01-08 17:38:05Z

3

Data is not in scope in this line

$.each(data.irishtowns, function(key, val) {

You could move this up into the callback, or use a global variable to provide access: i.e. in the callback have a line countries = data and then

$.each(countries.irishtowns, function(key, val) {

answered Jan 8, 2016 at 17:38

Simon H

21.2k14 gold badges84 silver badges144 bronze badges

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

Collectives™ on Stack Overflow

Getting a 'Cannot find variable' error trying to access a json object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related