如何读取动态字符串作为对象引用

如何解决如何读取动态字符串作为对象引用

我需要将按钮的值设置为动态字符串。这个字符串应该变成一个对象引用。单击按钮时，对象将被加载到新变量中。截至目前，它正在读取字符串而不是将其作为参考读取。

对象：

var Wall ={
    "Option1":{},"Option2":{},"Option3":{
      "Option1_3":{
        Option1_1_3:{
           aTotal:100,Total_Something_Else:20,Another_Total:40,More_totals:20,Total:20,},"Option2_1_3":{},"Option3_1_3":{}
      },"Option2_3":{},"Option4":{},"Option5":{}};

创建按钮的代码：

var options = ['1','2','3','4']

for (var a = 1; a < 2; a++) {
  for (var b = 3; b <4; b++) {
    for (var i = 0; i < 1; i++) {
      document.getElementById('Option1_3').innerHTML = (`<button class="button"  value='${JSON.stringify('Wall.Option'+options[i]+'.Option'+a+'_'+b)}' onclick= "PopulateGraph(this.value)">Wall Time</button>`);
    }
  }
}
function PopulateGraph(val){
  console.log(Wall.Option3.Option1_3); //The ouptut of this is what I want
  console.log(JSON.parse(val));

}

上面的代码需要像这段代码一样：

Code that works the way I need it to

输出：最上面的输出是我需要的：

Output

请注意，我对编码和 JavaScript 非常陌生。如果您有任何建议从长远来看使我的代码更好，或者有您认为有用的参考资料，请不要害羞。如果这看起来很简单，我深表歉意。我已经尝试了一些不同的解决方案来解决我的问题（使用 eval() 和 scope[] ），但我还没有找到解决方案。我提供了一个非常简化的代码版本，但问题是一样的。

解决方法

使用 bracket notation [] 访问属性。

JSON.stringify(Wall['Option'+options[i]]['Option'+a+'_'+b])

此外，我会用文本创建一个变量，以避免在同一行中完成所有工作

for (var i = 0; i < 1; i++) {
  const optionValue = Wall['Option' + options[i]]['Option' + a + '_' + b];
  const optionJson = JSON.stringify(optionValue);
  document.getElementById('Option1_3').innerHTML = (`<button class="button"  value='${optionJson}' onclick= "PopulateGraph(this.value)">Wall Time</button>`);
}

至少有这些问题：

您尝试使用 i、a 和 b 构建的引用在您的对象中不存在。您的对象只有“Option3”的嵌套对象，但由于 i 在 for 循环中初始化为 0，因此您没有针对该属性。
传递给 JSON.stringify 的参数应该是对象中的嵌套值，但是您正在传递一个字符串，因此 该字符串 将被字符串化（到另一个字符串).
我知道您使用单引号来分隔 value 属性的值，但是（如果前面的点是固定的）Wall 对象中的目标值可能是一个字符串有一个单引号，然后你的 HTML 仍然会被破坏，因为这会结束你用单引号分隔的 value 属性。
由于 Wall 对象是动态填充的，因此您可能会过早构建按钮——在填充 Wall 对象之前——因此 value 属性即使解决了上述问题，仍然可能是错误的。

通过不将按钮构建为 HTML 字符串，而是使用 DOM 方法创建按钮元素及其属性，可以避免这些复杂性。

此外，您存储在 value 属性中的信息似乎可以在没有该属性的情况下动态派生：

我们可以找到被点击按钮的父元素，得到它的id属性，然后我们就知道了Wall对象中的二级属性。
Wall 对象的结构似乎可以从二级属性名称派生出一级属性名称。

此外，您可以在不需要 Wall 或 a 整数的情况下迭代 b 对象中的属性。

这是如何做到的：

var Wall ={
    "Option1":{},"Option2":{},"Option3":{
        "Option1_3":{
            "Option1_1_3":{
                aTotal:100,Total_Something_Else:20,Another_Total:40,More_totals:20,Total:20,},"Option2_1_3":{},"Option3_1_3":{}
        },"Option2_3": {
            "Option2_1_3":{
                test:1
            }
        },"Option4":{},"Option5":{}
};

for (let option of Object.values(Wall)) {
    for (let id in option) {
        let container = document.getElementById(id);
        if (container) {
            let button = document.createElement("button");
            button.className = "button";
            button.textContent = "Wall Time for " + id;
            button.addEventListener("click",PopulateGraph);
            container.appendChild(button);
        }
    }
}

function PopulateGraph() { // no argument.
    // Drill down in the Wall object,based on the id of the button's container
    let val = this.parentNode.id.match(/\d+/g).reduceRight(
        (acc,_,i,arr) => acc[`Option${arr.slice(i).join("_")}`],Wall
    );
    console.log(val);
}

<div id="Option1_3"></div>
<div id="Option2_3"></div>