Javascript 使用JSON.parse将JSON转换为HTML未定义错误

当试图解析JSON时

[{"title":"First Item","href":"first","children":[{"title":"Sub First Item","href":"sub"}]},{"title":"Second Item","href":"home"}]

进入一个列表进行导航，它只是返回未定义

我使用的是另一个答案中的代码，它与硬编码的JSON配合得很好，但是当从文本框中使用它（因为它将使用jquery.nestable.js生成）时，它只是给出了未定义的代码，我不明白为什么，我也尝试过避开引号，但没有运气

function convertNav(){
    var data = document.getElementById('jsonNav').value;
    var jsn = JSON.parse(document.getElementById('jsonNav').value);
    var parseJsonAsHTMLTree = function(jsn){
    var result = '';
    if(jsn.title && jsn.children){
        result += '<li><a href="' + jsn.href + '">' + jsn.title + '</a><ul>';        

        for(var i in jsn.children) {            
            result += parseJsonAsHTMLTree(jsn.children[i]);            
        }

        result += '</ul></li>';        
    }
    else { 
        result += '<li><a href="' + jsn.href + '">' + jsn.title + '</a></li>'; 
    }

    return result + '';    
}

var result = '<ul>'+parseJsonAsHTMLTree(jsn)+'</ul>';
document.getElementById('convertedNav').value = result;
}

函数convertNav（）{
var data=document.getElementById（'jsonNav'）.value；
var jsn=JSON.parse（document.getElementById（'jsonNav'）.value）；
var parseJsonAsHTMLTree=函数（jsn）{
var结果=“”；
if（jsn.title&&jsn.children）{
结果+='
'；
对于（jsn.children中的变量i）{
result+=parseJsonAsHTMLTree（jsn.children[i]）；
}
结果+='
'；
}
否则{
结果+='
'；
}
返回结果+“”；
}
var result='
'+parseJsonAsHTMLTree（jsn）+'
'；
document.getElementById（'convertedNav'）。值=结果；
}

我把它放在一个文件夹里

---

您的jsn变量是一个数组。您将获得一个对象列表，需要解析每个对象。 在获得jsn后添加这个，您将看到一个检索数据的示例

alert(jsn[0].title);

---

JSON被解析为一个对象数组。记住这一点，您提取信息的路径是错误的。例如，您有：

if(jsn.title...

…而没有

jsn.title

。但是，有一个json[0]

title

基本上，在对象上缺少一个循环。之后

var result = '';

add

对于（var i=0，len=jsn.length；i …并在随后的代码中将所有对

jsn

的引用更改为

jsn[i]

当然，还要进一步关闭环路

（最后，冒着学究的风险，

jsn

不是var的最佳名称；它不再是JSON；它过去是，但现在被解析了，所以它是一个数组。JSON是一个字符串。）

这不是JSON，这是一个对象数组。你不需要解析它。它已经被解析了。它是一个javascript对象

您应该能够像解析常规对象一样解析它

data[0].title

data[0].children[1].title

---

等等。

您的代码只处理一个Javascript对象，但根据您的代码，所有节点和子节点都包装在Javascript数组中。您可以使用

Array.prototype.forEach

处理数组对象

下面是示例代码

函数convertNav（）{
var data=document.getElementById（'seriaNav'）。值；
var jsn=JSON.parse（document.getElementById（'seriaNav'）.value）；
var parseJsonAsHTMLTree=函数（jsn）{
var结果=“”；
jsn.forEach（功能（项目）{
if（item.title&&item.children）{
结果+='
'；
结果+=parseJsonAsHTMLTree（item.children）；
结果+='
'；
}否则{
结果+='
'；
}
});
返回结果+“”；
};
var result='
'+parseJsonAsHTMLTree（jsn）+'
'；
document.getElementById（'convertedNav'）。值=结果；
}

[{“title”：“First Item”，“href”：“First”，“children”：[{“title”：“Sub First Item”，“href”：“Sub”}]}，{“title”：“Second Item”，“href”：“home”}]

转换

您有一个对象数组。

if（jsn[0].title…）

是的，这里的问题是您的数据对象是一个数组，因此您需要为数组中的每个项执行此操作。现在您需要查看是否要将数组中的每个项视为自己的列表或列表项。正如@MarcB所指出的，您可以硬编码为：var result='

'+parseJsonAsHTMLTree（jsn[0]）+parseJsonAsHTMLTree（jsn[1]）+“

”；它是一个有效的JSON。

在JSON中，它们采用以下形式：数组是值的有序集合。数组以[（左括号）开始，以]（右括号）结束。值以，（逗号）分隔.

它是一个对象。JSON是一个字符串。谢谢！我现在想知道我怎么完全错过了需要for循环的机会。太晚了。使用foreach接缝更好！请注意，对于Internet Explorer，

foreach

仅在IE9之后才可用。

data[0].title

data[0].children[1].title