JSON到HTML使用JSON.parse未定义错误

JSON to HTML using JSON.parse undefined error

本文关键字：JSON 未定义 错误 parse 使用 HTML      更新时间：2023-09-26

尝试解析JSON 时

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

进入列表进行导航，它只是返回undefined。

我使用的是另一个答案中的代码，它在硬编码的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 里了

http://jsfiddle.net/nfdz1jnx/

您的代码只处理一个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>

您的jsn变量是一个数组。您将返回一个对象列表，并且需要解析每个对象。在返回jsn之后添加此项，您将看到一个检索数据的示例。

alert(jsn[0].title);

您的JSON被解析为一个对象数组。考虑到这一点，你提取信息的途径是错误的。例如，您有：

if(jsn.title...

而不存在CCD_ 2。然而，存在json[0].title。

基本上，你错过了一个循环，在对象上。之后

var result = '';
add

对于（var i=0，len=jsn.length；i

并且在随后的代码中将对jsn的所有引用改变为jsn[i]

当然，还要进一步缩小循环。

（最后，冒着迂腐的风险，jsn不是var的最佳名称；它不再是JSON；它过去是JSON，但现在被解析了，所以它是一个数组。JSON是一个字符串。）

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

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

您应该能够像解析普通对象一样解析它。

data[0].title
data[0].children[1].title

等等。

相关文章：