2

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);


        }
    );

});
  • what is in your `result` array – Azad Sep 27 '18 at 05:02
  • `result[i][stat]`? – Ram Sep 27 '18 at 05:03
  • `foo.bar` is identical to `foo["bar"]`, identical to `stat = "bar"; foo[stat]`. Similarly, `foo = { bar: 42 }` is equivalent to `foo = { ["bar"]: 42 }`, identical to `stat = "bar"; foo = { [stat]: 42 }`. – Amadan Sep 27 '18 at 05:09
  • have you tried `result[i][stat]` ?? – RizkiDPrast Sep 27 '18 at 05:18
  • Although the "duplicate" linked to my question didn't have the answers I was looking for; to anyone passing by, I want to point out that undefined and @RizkiDPrast 's responses were exactly what I was looking for!! Thank you so much, and everyone else who tried to help out! – Redfearn-Justin Sep 28 '18 at 00:03

0 Answers0