关于eval的邪恶：如何清理

Question

I'm building a site that will (eventually) be the front-end for a game. I want to be able to dynamically build a list of "powers" that the user is able to purchase. In order to build these lists, I'm using a PHP-based SQL query, then passing it to Javascript for dynamic choices (some powers have prerequisite powers).

1. I know there's a simpler way to do what I'm doing, but I'm not super concerned with that right now (I will be later, but I'm trying to get this functional and then clean) (again, I know this is non-optimal).
2. I'm using eval to parse which divs to show, and I want to know how not to.
3. I'm having issues getting my div names built right in the first place.

Here's my code: Javascript (separate file)

function upgradeList(passed)
{
    var PowerArray = [];
    var DetailPowerID = [];
    var EscapedPowerID = [];
    PowerArray.push([]);
    PowerArray = eval(passed);
    var OutputThing="";
    for (i=0;i<PowerArray.length;i++)
    {
        DetailPowerID[i] = 'detail' + PowerArray[i][0];
        EscapedPowerID[i] = "'" + DetailPowerID[i] + "'";
    }
    for (i=0;i<PowerArray.length;i++)
    {
        OutputThing = OutputThing + "<br><a href='#' onClick='showUpgradeDetails(" + DetailPowerID[i] + ")'>" + PowerArray[i][2] + "</a><div class='hidden' id='" +
        DetailPowerID[i] + "'>" + PowerArray[i][3] + "</div>";  }
        document.getElementById("secondUpgrade").innerHTML=OutputThing;
        document.getElementById("secondUpgrade").style.display='block';
    }
}

PHP writing HTML and JS: {$AbleToUpgrade and $UpgradeList are both 2d arrays built from SQL queries)

echo "<script name='UpgradeList'>";
settype($UpgradesListSize[$i],"int");
for ($i=0;$i<count($AbleToUpgrade);$i++)
{
    echo "var UpgradeList" . $AbleToUpgrade[$i][0] . " = new Array();";
    for ($j=0;$j<=$UpgradesListSize[$i];$j++)
    {
        echo "UpgradeList" . $AbleToUpgrade[$i][0] . ".push(Array('"
            . $UpgradeList[$i][$j][0] . "', '"
            . $UpgradeList[$i][$j][1] . "', '"
            . $UpgradeList[$i][$j][2] . "', '"
            . $UpgradeList[$i][$j][3] . "', '"
            . $UpgradeList[$i][$j][4] . "'));";
    }
}
echo "</script>";

... and, later...

echo "<div id='SpendUpgrade'>
    Select power to upgrade:
    <ul>";
    for ($i=0;$i<count($AbleToUpgrade);$i++)
    {
        echo "<li><a href='#' name='UpgradeList" . $AbleToUpgrade[$i][0] . "' onClick='upgradeList(this.name)'>" . $AbleToUpgrade[$i][1] . " - " . $AbleToUpgrade[$i][2] . "</a></li>";
    }
    echo "</select>
    <div id='secondUpgrade' class='hidden'>

    </div>
    <div id='thirdUpgrade' class='hidden'>

    </div>
</div>";

When I load the page, I wind up with generated text like this:

<a href="#" onclick="showUpgradeDetails(detail21)">Real Armor</a>

and the corresponding div:

<div class="hidden" id="detail21" style="display: none;">Your armor only works in the Waking</div>

In order to get the div to show (display:block;), I need to call the function like so:

showUpgradeDetails("detail21")

but I can't make JS / PHP write the quotes correctly. Help (with any or all of this?) please!

Answer 1

I found a resolution, and it wasn't JSON.parse(). I changed PowerArray = eval(passed); into PowerArray = window[passed];.

Because passed contains the name of a variable, and is not the variable itself, I couldn't work directly with it. However, because it was a string that held exclusively the name of a globally-defined variable, I could pass it to the window[] construct and have it work.