Question

尝试解析JSON时

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

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

我正在使用其他答案中的代码，这些代码在使用硬编码的JSON时运行良好但是当从文本框中使用它时（因为它将使用jquery.nestable.js生成）它只是给出了undefined，我不知道为什么，我试过逃避引号但在那里没有运气。

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/

Answer 1

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

alert(jsn[0].title);

Answer 2

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

if(jsn.title...

......而没有jsn.title。但是，有json[0].title。

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

var result = '';

add

for（var i = 0，len = jsn.length; i

...并在其后的代码中将对jsn的所有引用更改为jsn[i]

当然，进一步关闭循环。

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

Answer 3

[{"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

等

Answer 4

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

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

4 个答案: