JavaScript - 通过动态值加载 JSON

Question

我想加载此函数中看到的以下 JSON 结构。

       function load1(input) {
            var txt = '{ "kind1" : [{ "name":"blue" , "color":"blue" },{ "name":"red" , "color":"red" },{ "name":"yellow" , "color":"yellow" } ], "kind2" : [{ "name":"blue2" , "color":"blue2" },{ "name":"red2" , "color":"red2" },{ "name":"yellow2" , "color":"yellow2" } ]}';
            var obj = eval("(" + txt + ")");
            var output = "";

            for (var i in obj.kind1) {
                output += obj.kind1[i].name + ", " + obj.kind1[i].color + "<br>"
            }
            document.getElementById("content").innerHTML = output + "Eingabe: " + input
        }

现在我需要通过链接的“id”动态加载 JSON 的函数。

<a onclick="return load1(this.id)" id="kind1">link_product1</a>
<a onclick="return load2(this.id)" id="kind2">link_product2</a>

是否可以更改查询“obj.kind1”来执行此操作？我可以将 id 加载到函数中，但用“input”替换“kind1”不起作用。任何人都可以展示这个逻辑是如何工作的？

Answer 1

由于您在函数体内对 txt 进行了硬编码，因此在我看来，您可以对要使用的实际 JavaScript 对象进行硬编码，并跳过 eval 步骤。如果出于某种原因您不想这样做，您应该使用 JSON.parse 代替。即使是相对较旧的浏览器(IE8)也支持它。

然后，您可以使用括号表示法访问提供的 key :

for (var i = 0; i < obj[input].length; i++) {
    output += obj[input][i].name //etc.

编辑:根据您的“我正在使用函数 getJSON”，这似乎表明您正在使用 jQuery 并且 $.parseJSON 可用。返回到 getJSON 回调的数据不需要解析。它应该已经是 JavaScript 构造了。