CODEWITHSUNDEEP
javascriptjqueryjson
Chris
Chris

Reputation: 127

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

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>

Upvotes: 0

Views: 961

Answers (1)

Simon H
Simon H

Reputation: 21005

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) {

Upvotes: 3

Related Questions