Cannot read undefined property error - building object properties in JavaScript

Question

I am taking an online JavaScript class and am stuck on a problem involving objects. In the following code, my assignment is to output a string that retrieves the name of each ranger (e.g. lighthouseRock.ranger1.name) and match their station to the corresponding item in the superBlinders array.

If I hard-code the ranger1 property, the output format is in the right ballpark. However, if I try to be creative and build a variable (thisRanger) to dynamically insert the appropriate ranger into my object, the routine returns an error "TypeError: Cannot read property 'name' of undefined". My thisRanger variable builds OK but whenever I try to insert it into my chain after lightHouseRock it causes the undefined problem. Here is my code:

var superBlinders = [ ["Firestorm", 4000], ["Solar Death Ray", 6000], ["Supernova", 12000] ];
var lighthouseRock = {
  gateClosed: true,
  weaponBulbs: superBlinders,
  capacity: 30,
  secretPassageTo: "Underwater Outpost",
  numRangers: 0
};
function addRanger(location, name, skillz, station) {
  location.numRangers++;
  location["ranger" + location.numRangers] = {
    name: name, 
    skillz: skillz, 
    station: station
  };
}
addRanger(lighthouseRock, "Nick Walsh", "magnification burn", 2);
addRanger(lighthouseRock, "Drew Barontini", "uppercut launch", 3);
addRanger(lighthouseRock, "Christine Wong", "bomb defusing", 1);

var dontPanic = function () {
  var message = "Avast, me hearties!\n";
  message += "There be Pirates nearby! Stations!\n";
  for (var i = 1; i <= lighthouseRock.numRangers; i++) {
    var thisRangerNumber = i;
    var thisRanger = "ranger" + thisRangerNumber;
    // message += lighthouseRock.ranger1.name + ", man the " + superBlinders[lighthouseRock.ranger1.station][0] + "!\n";
    message += lighthouseRock.thisRanger.name + ", man the " + superBlinders[lighthouseRock.thisRanger.station][0];
  };
  console.log(message);
}

The expected output should look something like this:

Avast, me hearties!
There be Pirates nearby! Stations!
<name>, man the <superblinder>!
<name>, man the <superblinder>!
<name>, man the <superblinder>!

How can I insert thisRanger into my code so that it gives me the expected output? Thank you very much for your help!

if the answer was what you were looking for please accept it by pressing the tick :) — 8bitcat
– 8bitcat, Commented Jan 20, 2014 at 21:05

8bitcat · Accepted Answer · 2014-01-20 21:06:50Z

1

Working code! It outputs all you want it todo!

UPDATE you have an error in your code I fixed that also..

Ranger2 will always be stationed on undefined since there aren't 3 stations when counting as an array, remember array in javascript starts counting from 0(zero). I changed Drew barontini to "0"

addRanger(lighthouseRock, "Nick Walsh", "magnification burn", 2);
addRanger(lighthouseRock, "Drew Barontini", "uppercut launch", 0);
addRanger(lighthouseRock, "Christine Wong", "bomb defusing", 1);

CODE OUTPUT

Avast, me hearties!
There be Pirates nearby!
Stations!
Nick Walsh, man the Supernova,12000
Drew Barontini, man the Firestorm,4000
Christine Wong, man the Solar Death Ray,6000

I didn't do much to change your code. But what I did is that I change your code into

 message += lighthouseRock[thisRanger].name + ", man the " + superBlinders[lighthouseRock[thisRanger].station] +"\n";

Its important to know with javascript that you can use brackets [] to get to an object property if you build the stirng dynamicly.

var superBlinders = [ ["Firestorm", 4000], ["Solar Death Ray", 6000], ["Supernova", 12000] ];

var lighthouseRock = {
  gateClosed: true,
  weaponBulbs: superBlinders,
  capacity: 30,
  secretPassageTo: "Underwater Outpost",
  numRangers: 0
};
function addRanger(location, name, skillz, station) {
  location.numRangers++;
  location["ranger" + location.numRangers] = {
    name: name, 
    skillz: skillz, 
    station: station
  };
}
addRanger(lighthouseRock, "Nick Walsh", "magnification burn", 2);
addRanger(lighthouseRock, "Drew Barontini", "uppercut launch", 0);
addRanger(lighthouseRock, "Christine Wong", "bomb defusing", 1);

var dontPanic = function () {
  var message = "Avast, me hearties!\n";
  message += "There be Pirates nearby! Stations!\n";
  for (var i = 1; i <= lighthouseRock.numRangers; i++) {
    var thisRangerNumber = i;
    var thisRanger = "ranger" + thisRangerNumber;
    // message += lighthouseRock.ranger1.name + ", man the " + superBlinders[lighthouseRock.ranger1.station][0] + "!\n";
    message += lighthouseRock[thisRanger].name + ", man the " + superBlinders[lighthouseRock[thisRanger].station] +"\n";
  };
  console.log(message);


}

dontPanic();

edited Jan 20, 2014 at 21:06

answered Jan 20, 2014 at 20:07

8bitcat

2,2525 gold badges30 silver badges59 bronze badges

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

3 Comments

Joe Lewis Over a year ago

Awesome that does work and thank you for the clear explanations!! I do have one question: Suppose I could not change the addRanger station values. How might I account for that in the loop where I build the message variable? I tried ["ranger" + i - 1] and got undefined.

Joe Lewis Over a year ago

I have another potentially dumb question, but how can I access just the first half of each nested array item from the superBlinders array? For instance, I just want the retrieved content from the first item to be Firestorm and not "Firestorm", 4000. Does that make sense? I tried superBlinders[lighthouseRock["ranger" + i].station][0] but got undefined.

8bitcat Over a year ago

Post a new question and I can help you hard to answer questions in the comment section.

Collectives™ on Stack Overflow

Cannot read undefined property error - building object properties in JavaScript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related