javascript - 尝试使用 AJAX 加载 json 数据时重新加载 javascript 函数时出现 Jquery 错误

Question

我正在尝试使用 javascript 和 json 可视化文件夹结构。它会自动加载文件夹的根目录。当用户单击文件夹时，它应该加载该文件夹中的文件和文件夹等。

深入 json 的 JavaScript 代码工作正常，它使用变量“root”加载 json 文件的第一“层”。如果我手动将其更改为“roots.deeperFolder”，它将到达该文件夹。效果很好。

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

ajax 请求代码，如果成功则调用 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 中。 (root.deeperFolder) 手动工作的内容。

我想在函数之间传递数据不是问题，因为这工作正常。我在这一行收到错误:

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

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

链接到 JSON 数据。

http://codebeautify.org/jsonviewer/f56dce

Answer 1

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

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