Issue with getting value of object in jquery

Question

I am attempting to get the value of an object, by using a a random selection on its keys.

This is hooked up with a click event on an element, in this case this particular div,

. When this is invoked I change the HTML of a container element () to make the changes visible to the user.

When I click that element, I get this message back:

"Drew a [object Object]continent."

    $(function() {
   var continents = [{
     id: "europe",
     continent: "Europe",
     message: "Europe It Is!"
   }, {
     id: "asia",
     continent: "Asia",
     message: "Let's Checkout Asia!"
   }, {
     id: "northamerica",
     continent: "North America",
     message: "North America Eh?"
   }, {
     id: "southamerica",
     continent: "South America",
     message: "South America Here We Come!"
   }, {
     id: "australia",
     continent: "Australia",
     message: "We Are Going Australia Mate!"
   }, {
     id: "africa",
     continent: "Africa",
     message: "Time To Go On African Safari!"
   }, {
     id: "antarctica",
     continent: "Antarctica",
     message: "Brrr.. Its Going To Be Cold In Antarctica"
   }];

   $(".notable").css("position", "relative");
   $(".note").hide(); 
   $(".note").each(function() {
     var pos = -$(this).fadeOut() + 'px';
     $(this).css({
       position: 'absolute',
       right: 90,
       bottom: pos
     });
   });

   $(".notable").hover(function() {
     $(this).children(".note").show();
   }, function() {
     $(".note").hide();
   });

   $("#magnifying-glass").click(drawcontinent.bind(this, continents));
 });

 function drawcontinent(randompick) {
   var chosen = Math.floor(Math.random() * 7);
   let continentObject = randompick[chosen];
   $("#outputArea").html("The Continent is " + continentObject.continent +     ".
" + continentObject.message + "
Redirecting to continent page...");
   setTimeout(function() {
     var link = $("a[data-continent=" + continentObject.id + "]");
     link.click();
     //alert("Clicked link " + link.text()); // Comment this line and uncomment line above to go to specific page.
   }, 200 );
 }





  
  
    

  Learn About THe World





  
    Choose Continent Here
    
      North America
      South America
      Europe
      Asia
      Africa
      Australia
      Antarctica


    
  



    Feeling Lucky? Click magnifying glass to randomly choose continent 
      
    
    

    


   
    
    
        Home
        News
        Contact
        About

gdyrrahitis · Accepted Answer

You need to fix the drawcontinent method.

First of all, the random number you choose is always going to be zero (you call Math.floor() on a decimal number between 0 and 1, something like this 0.5412).

This happens because Math.random() method returns a number between 0 and 1 (not including 1 though) (a decimal number). In order to fetch a number between a range you need to multiply the result from .random() with that exclusive number.

You have seven continents, so you need to multiply by 7 (you will get numbers from 0 to 6, which is your object's keys if you enumerate them).

Lastly, I don't understand why you have an object with continent names and a number value which is always 1. And in the drawcontinent you subtract that value. Please consider to refactor, maybe change your object to something like this, since you pick based on a random number between 0 and 6:

 randompick = {
   "0": "europe",
   "1": "asia",
   "2": "northamerica",
   "3": "southamerica",
   "4": "australia",
   "5": "africa",
   "6": "antarctica",
 }

And also, please remove it from global scope, make it private, hide it from global scope.

Anyways, based on current code, in order to pick the continent name based on the key index, you need to use the Object.keys() method. This method will enumerate all the keys in an object and return an array for you with them included in a string format.

You can pick the key using the following code:

Object.keys(randompick)[chosen]

You get all the keys in an array by passing the object to the .keys() method and you get the key by its index, using the chosen random number variable.

drawcontinent should be like this:

 drawcontinent = function() {
   var chosen = Math.floor(Math.random() * 7);
   console.log(chosen)
   if (chosen < this.europe) {
     this.europe--;
     return "Europe It Is!";
   }
   if (chosen < this.asia) {
     this.asia--;
     return "Let's Checkout Asia!";
   }
   if (chosen < this.northamerica) {
     this.northamerica--;
     return "North America Eh?";
   }
   if (chosen < this.southamerica) {
     this.southamerica--;
     return "South America Here We Come!";
   }
   if (chosen < this.australia) {
     this.australia--;
     return "You've got Australia Mate!";
   }
   if (chosen < this.africa) {
     this.africa--;
     return "Time To Go On African Safari!";
   }
   if (chosen < this.antarctica) {
     this.antarctica--;
     return "Brrr.. Its Going To Be Cold In Antarctica";
   }

   $(function() {
     $("#outputArea").html("Drew a " + Object.keys(randompick)[chosen] + " continent.")
   });

 }

Check this fiddle please.

Update

Here is some little bit of refactoring, to make the code simpler, please build on that.

Issue with getting value of object in jquery

Answers (1)

Related Questions