JSON.parse（）返回字符串

Question

我正在尝试遍历对象数组，并使用其值是每个对象的全部内容的选项填充HTML select元素。填充成功，但是在处理过程中将对象转换为字符串，并且我不知道如何将其转换为对象。

通过JSON.parse（）运行它们会给我“未捕获的SyntaxError：JSON中JSON.parse位置1处的意外令牌o”。我的研究表明，当您在已经是对象的对象上使用JSON.parse（）时，会发生这种情况，但是事先在数据上运行typeOf（）会表明它是字符串。

如果我改为通过JSON.parse（JSON.stringify（data））运行数据，但没有输出此错误，但它的输出仍然是字符串。

[请帮助我了解我对JSON.parse（）的误解。谢谢。

const selectors = document.getElementsByClassName("ingredientSelector");
const cookButton = document.getElementById("cookButton");

//very large array of ingredient objects

let selectorOptions = "<option value = 'Nothing'>Nothing</option>";
 for (let i = 0; i < ingredients.length; i++){
     selectorOptions += ("<option value = '" + ingredients[i] + "'>" + ingredients[i].name + "</option>");
 }
Array.prototype.forEach.call(selectors,function(selector){
    selector.innerHTML = selectorOptions;
});

function cook(ingredients){
    console.log("Cooking with ingredients: " + ingredients);
}

cookButton.addEventListener("click", function(){
    let ingredients = [];
    Array.prototype.forEach.call(selectors,function(selector){
        if(selector.value !== 'Nothing'){
            console.log(typeof(selector.value))
            JSON.parse(selector.value);
            let JSONString = JSON.stringify(selector.value);
            console.log(typeof(JSONString));
            let JSONObject = (JSON.parse(JSONString));
            console.log(typeof(JSONObject));
            console.log(JSONObject.name);
        }
        console.log(ingredients);
        cook(ingredients);
    });
});

Answer 1

问题是如何为要插入每个选择器的value构建option属性。在此行：

selectorOptions += ("<option value = '" + ingredients[i] + "'>" + ingredients[i].name + "</option>");

您的评论说ingredients是一个对象数组，因此ingredients[i]将是一个对象。 连接对象到字符串，默认情况下会将其转换为[object Object]-这就是导致您出错的原因。您最终会看到一个类似于以下内容的选项：

<option value = '[object Object]'>Raw Prime Meat<object>

这里有两种完全有效的方法。您可以将ingredient index存储在选项值中，然后再用于在主数组中查找成分，或者应使用JSON.stringify(ingredients[i])将对象转换为JSON.parse able字符串以使您的代码保持原样。

因此可以正常工作：

selectorOptions += ("<option value = '" + JSON.stringify(ingredients[i]) + "'>" + ingredients[i].name + "</option>");