重新加载javascript函数时出现Jquery错误,试图用AJAX加载json数据

时间:2015-11-25 20:22:55

标签: javascript jquery json ajax

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

在json中更深入的javascript代码工作正常,它使用变量“root”加载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);
});

此函数将“deep folders”信息发送到之前的buildRoot函数。 buildRoot函数将更深层文件夹的名称添加到root。 (root.deeperFolder)手动工作。

我想在函数之间传递数据不是问题,因为这样可以正常工作。我在这一行得到了错误:

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

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

链接到JSON数据。

http://codebeautify.org/jsonviewer/f56dce

1 个答案:

答案 0 :(得分:2)

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

我认为这是一种更好的方法。 (参见jQuery documentation