2015-11-25 60 views
0

我想要用javascript和json来形象化文件夹结构。它会自动加载文件夹的根目录。当用户点击一个文件夹时,它应该加载该文件夹中的文件和文件夹等。重新加载JavaScript函数jquery错误试图加载json数据与AJAX

在json中获得更深的JavaScript代码工作正常,它会加载json文件的第一个“图层” “根”。如果我手动将其更改为“roots.deeperFolder”,它会到达该文件夹。这很好。

$.ajax({ 
    type: 'GET', 
    url: 'directory.json', 
    data: { 
    get_param: 'value' 
    },dataType: 'json', 
    success: buildRoot 
}); 

代码为ajax reaquest和调用buildRoot函数如果成功。

function buildRoot(root, clickedFolder){ 

    if (typeof root === 'string') { 
      var addFolder = "." + clickedFolder; 
      var stringRoot = root + addFolder;   
      var root = eval(stringRoot); 
      console.log(stringRoot); 
     } 

    $.each(root, function(index, element){ 

     if (isNaN(index)) { 
      $("#sideFolderContainer").append("<li class='folder' id=" + index + ">" + index + "</li>"); 
     } 
     else { 
      $("#sideFolderContainer").append("<li>" + element + "</li>"); 
     } 
    }); 

} 

该函数成功地遍历JSON文件的第一层。 “if string”功能仅适用于点击功能。

$(document).on('click', '.folder', function(e) { 
    var root = "root"; 
    var clickedFolder = $(this).attr("id"); 
    buildRoot(root, clickedFolder); 
}); 

该函数将“深层文件夹”信息发送到前一个buildRoot函数。 buildRoot函数将深层文件夹的名称添加到根目录。 (root.deeperFolder)手动工作。

我猜通过数据之间的函数是不是问题,因为这工作正常。我得到这条线上的错误:

$.each(root, function(index, element){ 

这是控制台输出的内容(忽略第一行)。 enter image description here

链接到JSON数据。

http://codebeautify.org/jsonviewer/f56dce

回答

2

我不建议使用JSON.parse(jsonString);而不是eval

我这是一个更好的方法。 (请参阅jQuery documentation