JSON Parse 和 JSON Stringify 打印效果不佳答案

【问题标题】：JSON Parse and JSON Stringify are not printing wellJSON Parse 和 JSON Stringify 打印效果不佳
【发布时间】：2021-08-18 23:28:11
【问题描述】：

我有一段代码，它应该从 JSON 文件中获取数据并将其转换为稍后将被设置样式的单个按钮。我希望按钮看起来像这样：

&lt;button&gt;NAME WOULD BE HERE; INTERESTS WOULD BE HERE&lt;/button&gt;

我必须这样做的代码如下：

function load() {
var arrayInput = '[{"name" : "Jeff", "interests" : "3"}, {"name" : "Harry", "interests" : "2"}, {"name" : "Bob", "interests" : "coding"}, {"name" : "Jay", "interests" : "coding"}]';
var array = JSON.stringify(arrayInput);
        var resultBoxs = document.getElementById("resultBoxs");
        for (var i = 0; i < array.length; i++) {
            var buttonCreate = document.createElement("button");
            buttonCreate.type = "checkbox";
            buttonCreate.innerHTML = array[i]

                resultBoxs.appendChild(buttonCreate);
            
        }
        }

<body onload="load()">
<div id="resultBoxs"></div>
</body>

我将代码设置为字符串化后的结果如图 1 所示。 Figure 1 当我将其设置为解析数据时，代码的结果如图 2 所示。它不断为数据创建越来越多的按钮，这是我不想要的。我希望它为数据列表中的每个人/姓名创建一个遵循上述模板的按钮。 Figure 2

谢谢。

【问题讨论】：

为什么要对 JSON 字符串进行字符串化？改用 JSON.parse
我只是用它来测试。我想我忘了在我上传的代码中把它改回来。

标签： javascript html jquery json

【解决方案1】：

非常接近！两件事：

第一个也是主要的问题是，您调用的是 JSON.stringify(arrayInput); 而不是 JSON.parse(arrayInput);，解析函数将 JSON 字符串转换为对象。

其次，buttonCreate.innerHTML = array[i] 必须是buttonCreate.innerHTML = array[i].name + "; " + array[i].interests;，这个新代码实际上是从数组元素中提取属性，而您只是将整个对象放入 innerHTML； [Object object] 会打印在您的按钮上。

这是您要查找的内容：

function load() {
var arrayInput = '[{"name" : "Jeff", "interests" : "3"}, {"name" : "Harry", "interests" : "2"}, {"name" : "Bob", "interests" : "coding"}, {"name" : "Jay", "interests" : "coding"}]';
var array = JSON.parse(arrayInput);
        var resultBoxs = document.getElementById("resultBoxs");
        for (var i = 0; i < array.length; i++) {
            var buttonCreate = document.createElement("button");
            buttonCreate.type = "checkbox";
            buttonCreate.innerHTML = array[i].name + ";" + array[i].interests;
                resultBoxs.appendChild(buttonCreate);
        }
   }

<body onload="load()">
<div id="resultBoxs"></div>
</body>

【讨论】：

No such thing as a JSON object