2015-11-25 59 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