In JavaScript, I cannot successfully access a randomly-selected property from my custom object class Question using dot notation

Question

5 weeks into learning JavaScript. I have the following scenario. I created a custom object/class Question with 5 properties: constructor class

class Question {
    constructor(interrogative, answRight, answWrong1, answWrong2, answWrong3) {
        this.interrogative = interrogative;
        this.answRight = answRight;
        this.answWrong1 = answWrong1;
        this.answWrong2 = answWrong2;
        this.answWrong3 = answWrong3;
    }
}

I have an array of objects Question which I populate by reading some text from a file. The text from the file is passed as values for the properties of my Question object. The name of the array that holds these Question objects is called quizQuestionsArray. No problem there so far.

Now I want to look only at the first object I have in my quizQuestionsArray. So, quizQuestionsArray[0]. That object looks like: object in quizQuestionsArray[0]

I want to select at random one of its properties whether it's answRight, answWrong1, answWrong2, or answWrong3 and assign the value of that randomly-selected property to an HTML's < li > innerText property. Once I assign that property value, I would in theory eliminate that value from propertiesArray (commented out momentarily until current issue is resolved) and then continue this loop up to 4 times (the total number of properties in object class that need to be assigned randomly to distinct HTML < li > elements; property interrogative is assigned earlier in the code so it does not enter into importance here). See the picture below for reference.Snapshot of code which is not giving me what I want

    let i = 0;
    var propertiesArray = ["answRight", "answWrong1", "answWrong2", "answWrong3"];  
    debugger;
    // randomly assign value of properties to the current choice list item
    for (let j = 0; j < 4; j++) {
        someRandomNum = randomNumber(0, propertiesArray.length-1);
        // this conditional will always run
        if (someRandomNum != null) {
            choiceListItem = document.createElement("li");
            currObj = quizQuestionsArray[i];
            currProperty = propertiesArray[someRandomNum]
            console.log(currObj, currProperty);
            choiceListItem.innerText = currObj.currProperty;
            // propertiesArray = propertiesArray.splice(someRandomNum,1);
            choiceList.appendChild(choiceListItem);    
        }
    }
    // append the choice list to the div wrapper
    container.appendChild(choiceList);

It's notable that the execution of my script does not actually throw an error. When execution finishes, the HTML < li > element innerText value comes out as undefined, which is clearly none of the values of the object located in quizQuestionsArray[0]. snapshot of HTML < li > element showing undefined as its value

How can I go about resolving this? Your help and guidance is appreciated!

Answer 1

Change how you are accessing a property dynamically

In your loop you have the following

 currProperty = propertiesArray[someRandomNum]
 console.log(currObj, currProperty);
 choiceListItem.innerText = currObj.currProperty;

On that third line when you call currObj.currProperty it doesn't reference the value of the variable currProperty. It assume there is a property on that object called currProperty. When you need to access dynamic properties in JS you use the square braces, []. Rewriting the above code should work as follows:

 currProperty = propertiesArray[someRandomNum]
 console.log(currObj, currProperty);
 choiceListItem.innerText = currObj[currProperty];

Example:

var home = {
  color: "blue",
  occupied: true,
  property: "apartment"
}

var property = "color";

console.log("Home.Property: ", home.property)
console.log("Home[Property]: ", home[property])