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

Question

尝试解析 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中

http://jsfiddle.net/nfdz1jnx/

Answer 1

您的代码仅处理单个 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>