Hello fellow coders,
I am a question pertaining to using a 'dynamic' variable being used to "call" an index of an array.
Background
Essentially, I have a "dynamic" variable of which is used for multiple buttons. This variable, called stat
, works as it should up until it's attached to the array of question, result[i]
(this is in the last line of code in the for loop below). The ultimate goal with result[i].stat
is to dynamically enter an array property, for whichever button pressed, in place of stat
.
For example, I'm attempting - and hoping - that by using result[i].stat
, and if the button pressed has a data attribute of crew_hp
, the ending result would be result[i].crew_hp
.
Problem
However, it only returns undefined
. I personally believe this is because it reads it as ONE line of code, ignoring the fact that stat
is a variable and not a property of the array it's attached to (e.g., result[i].stat
).
Attempts to Resolve problem
So far, I've attempted various ways of concatenating the two together, with no avail. For example, I've tried the following:
var subStat = "result[i]." + stat;
//==================================
var subStat = result[i];
subStat += "." + stat;
//==================================
//And of course
result[i].stat
//==================================
Question
So, finally, my question is: "is it possible to have a dynamic variable to call a property of an array"? If so, how?
P.S. I know I could always make a separate function for each button but in an attempt to keep my code as dry as possible, I would personally like to make this work, if that's possible.
Thank you for your help! :)
CODE IN QUESTION:
$(".lb-button").on("click", function (event) {
event.preventDefault();
var stat = $(this).attr("data-stat");
var statTitle = $(this).attr("data-title");
var newStat = {
stat: stat,
}
$.ajax("/api/topstats", {
type: "POST",
data: newStat
}).then(
function (result) {
console.log(result);
var htmlTable = "<table id='leaderboard'>"
//table headers
htmlTable += "<tr> <th> Rank </th> <th> Captain Name </th> <th> " + statTitle + " </th> </tr>";
//variable to establish rank
var placementNumber = 0;
//For loop for going through
for (var i = 0; i < result.length; i++) {
placementNumber++;
htmlTable += "<tr>"
//entering rank into 1st column
htmlTable += "<td>" + placementNumber + "</td>";
//entering captain's name into 2nd column
htmlTable += "<td>" + result[i].captain_name + "</td>";
//entering score amount into final column (might need to fix, as "buttonPressed" is a 'dynamic variable')
htmlTable += "<td>" + result[i].stat + "</td>";
//close the table row after making row
htmlTable += "</tr>"
}
// closing table
htmlTable += "</table>";
$("#leaderboard").html(htmlTable);
}
);
});