CODEWITHSUNDEEP
javascriptjquery
Erma Isabel
Erma Isabel

Reputation: 2177

Alert values properties of an object related to input value

I am no able to alert object values corresponding to the id of area tag.

My code is, 

          $(document).ready(function () {
            $(".wholecirclewrapper area").click(function(){      
                if($(this).hasClass("active")) {        
                    return false;
                }       
                var choice = $(this).attr("id");    
                $.each(results.States, function(i, item) {
                    var st=results.States[i].Name;
                    if(choice==st)
                    {
                        alert(results.States[i].ISHI);  
                    }
                });

            });

        });

My Html code is

            <div id="mapdiv">
        <img src="india.gif"  alt="India" usemap="#indiamap" />
        <map name="indiamap" class="wholecirclewrapper">
            <area class="specificshelfdiv1" id="AndraPradesh" shape="rect" coords="0,0,82,126" href="#"  />
            <area class="specificshelfdiv2" id="ArunachalPradesh" shape="circle" coords="90,58,3" href="#"  />
            <area class="specificshelfdiv3" id="Assam" shape="circle" coords="124,58,8" href="#"   />     
        </map> 
    </div>

My external json looks like

      var results={"States":[
        { "Name" : "AndraPradesh" , "ISHI" : "19.5 (Serious)" ,"Literacy rate" : "67.7" ,"Population rate" : "84,665,533" ,"NFHS" : "29.8" ,"Tap water" : "69.9"}, 
        { "Name" : "ArunachalPradesh" , "ISHI" : "Not estimated" ,"Literacy rate" : "67" ,"Population rate" : "1,382,611" ,"NFHS" : "29.6" ,"Tap water" : "65.5"}, 
        { "Name" : "Assam" , "ISHI" : "19.8 (Serious)" ,"Literacy rate" : "73.2" ,"Population rate" : "31,169,272" ,"NFHS" : "35.8" ,"Tap water" : "10.5"} 
     ]
     };

i am calling json via 

           <script src="json_states.json" type="text/javascript"> </script>

What am I doing wrong?

Upvotes: 0

Views: 184

Answers (3)

Applehat
Applehat

Reputation: 668

Its been said 3 times already, but since you seem to be ignoring it, or not understanding, i'll post it again.

var results={"States":[
    { "Name" : "AndraPradesh" , "ISHI" : "19.5 (Serious)" ,"Literacy rate" : "67.7" ,"Population rate" : "84,665,533" ,"NFHS" : "29.8" ,"Tap water" : "69.9"}, 
    { "Name" : "ArunachalPradesh" , "ISHI" : "Not estimated" ,"Literacy rate" : "67" ,"Population rate" : "1,382,611" ,"NFHS" : "29.6" ,"Tap water" : "65.5"}, 
    { "Name" : "Assam" , "ISHI" : "19.8 (Serious)" ,"Literacy rate" : "73.2" ,"Population rate" : "31,169,272" ,"NFHS" : "35.8" ,"Tap water" : "10.5"} 
 ]
 };

IS NOT JSON. It is a Javascript Object.

JSON would just be this:

{"States":[
    { "Name" : "AndraPradesh" , "ISHI" : "19.5 (Serious)" ,"Literacy rate" : "67.7" ,"Population rate" : "84,665,533" ,"NFHS" : "29.8" ,"Tap water" : "69.9"}, 
    { "Name" : "ArunachalPradesh" , "ISHI" : "Not estimated" ,"Literacy rate" : "67" ,"Population rate" : "1,382,611" ,"NFHS" : "29.6" ,"Tap water" : "65.5"}, 
    { "Name" : "Assam" , "ISHI" : "19.8 (Serious)" ,"Literacy rate" : "73.2" ,"Population rate" : "31,169,272" ,"NFHS" : "35.8" ,"Tap water" : "10.5"} 
 ]}

Im not sure if the .json file extension will cause issues with any browsers, but if your defining a variable inside the file, it should just be .js... because thats exactly what it is.

Upvotes: 1

Valentin
Valentin

Reputation: 2858

First of all, try replacing alert with console.log

console.log(results.States[i].ISHI);

Then in Chrome press F12, go to Console and see if the values are printed. As a rule of thumb always use console.log instead of alert as it's more powerful and easier to use.

Update:

Try loading the scripts in the following order in the document head:

<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="json_states.json"></script>
<script>
   $(document).ready(function () {
...
</script>

Also see this example that I wrote: http://radulescu.me/overflow/1/

Upvotes: 2

Paul Aldred-Bann
Paul Aldred-Bann

Reputation: 6020

Your code seems to be working in this jsFiddle example here. I'm adding another element <p id="result"></p> and instead of alerting I'm setting the .text() of this element and it's fine. Try this method instead of alert and see what you get.

$(".wholecirclewrapper area").click(function() {
    if ($(this).hasClass("active")) {
        return false;
    }

    var choice = $(this).attr("id");

    $.each(results.States, function(i, item) {
        var st = results.States[i].Name;
        if (choice == st) {
            $("#result").text(results.States[i].ISHI);
        }
    });
});

Are you using a popup blocker of some kind, as these prevent certain scripts executing. If not then I suggest you check for script errors in your browser debug environment.

EDIT - If you're loading your json from an external file, instead of including it in the header have you tried loading it like this:

$.getJSON('json_states.json', function(data) {
    var results = data;

    // do the rest of your script here
});

Upvotes: 1

Related Questions