尝试解析 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;
}
我把它放在jsfiddle中
最佳答案
您的代码仅处理单个 Javascript 对象,但根据您的代码,所有节点和子节点都包装在 Javascript 数组内。您可以使用 Array.prototype.forEach 来处理数组对象。
示例代码如下。
function convertNav() {
var data = document.getElementById('seriaNav').value;
var jsn = JSON.parse(document.getElementById('seriaNav').value);
var parseJsonAsHTMLTree = function(jsn) {
var result = '';
jsn.forEach(function(item) {
if (item.title && item.children) {
result += '<li><a href="' + item.href + '">' + item.title + '</a><ul>';
result += parseJsonAsHTMLTree(item.children);
result += '</ul></li>';
} else {
result += '<li><a href="' + item.href + '">' + item.title + '</a></li>';
}
});
return result + '';
};
var result = '<ul>' + parseJsonAsHTMLTree(jsn) + '</ul>';
document.getElementById('convertedNav').value = result;
}
<textarea class="span7" style="width:400px;height:100px;" id="seriaNav">[{"title":"First Item","href":"first","children":[{"title":"Sub First Item","href":"sub"}]},{"title":"Second Item","href":"home"}]</textarea>
<hr />
<button class="btn btn-primary" onClick="convertNav();return false;">Convert</button>
<hr />
<textarea class="span5" style="width:400px;height:100px;" id="convertedNav"></textarea>
关于javascript - 使用 JSON.parse 的 JSON 到 HTML 未定义错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26790258/