$.getJSON没有'不起作用,但在脚本中包含JSON对象起作用

$.getJSON doesn't work but having the JSON object in the script works

本文关键字:脚本 包含 JSON 起作用 对象 没有 getJSON 不起作用      更新时间:2023-09-26

我正试图根据一些约束动态创建一个简单的select,它包含一个对象的属性作为option

当我的JSON是脚本的一部分时,一切都很好。

FIDDLE

代码

$(document).ready(function(){
    /*$.getJSON('input.json',function(data){
        alert('inside');
    });*/
    /*$.getJSON("inputjson.json", function(data){
        // I have placed alert here previously and realized it doesn't go into here
        console.log("datd");
        console.log(JSON.stringify(data,null,4));
    });*/

    var jsonList = 
    {
        "json_data" : {
            "data" : [
                {
                    "data" : "A node",
                    "metadata" : { id : 23 },
                    "children" : [ "Child 1", "A Child 2" ]
                },
                {
                    "attr" : { "id" : "li.node.id1" , "level" : "3" , "name" : "Ragini" },
                    "data" : {
                        "title" : "Long format demo",
                        "attr" : { "href" : "#" }
                    }
                },
                {
                    "attr" : { "id" : "li.node.id1" , "level" : "3" , "name" : "Rag" },
                    "data" : {
                        "title" : "Long format demo",
                        "attr" : { "href" : "#" }
                    }
                },
                {
                    "attr" : { "id" : "li.node.id1" , "level" : "4" , "name" : "Skyrbe" },
                    "data" : {
                        "title" : "Long format demo",
                        "attr" : { "href" : "#" }
                    }
                }
            ]
        }
    }

    var newObject = jsonList.json_data.data;
    var listItems= "";
    $form = $("<form></form>");
    $('#form_container').append($form);
    var $selectContainer = $("<select id='"selectId'" name='"selectName'" />");
    for (var i = 0; i < jsonList.json_data.data.length; i++)
    {
        if(jsonList.json_data.data[i].hasOwnProperty("attr") && jsonList.json_data.data[i].attr.level == 3)
        {
            listItems+= "<option value='" + jsonList.json_data.data[i].attr.name + "'>" + jsonList.json_data.data[i].attr.name + "</option>";
        }
    }
    $($selectContainer).html(listItems);
    $($form).append($selectContainer);
});

但是,当我尝试将JSON放入一个单独的.JSON文件并使用$.getJSON时,我没有取得任何成功。基本上,控制从来没有进入它。

这是我为$.getJSON 编写的代码

$.getJSON('input.json',function(data){
    console.log(JSON.stringify(data,null,4));
});

有人能指出我的错误吗?

干杯,Harsha

您正试图在getJSON调用完成之前生成select元素。将代码的其余部分放入getJSON函数的回调函数中,如下所示:

$.getJSON("inputjson.json", function(data){
    // I have placed alert here previously and realized it doesn't go into here
    console.log("datd");
    console.log(JSON.stringify(data,null,4));
    var newObject = jsonList.json_data.data;
    var listItems= "";
    $form = $("<form></form>");
    $('#form_container').append($form);
    // etc
});

还要注意,你有一个拼写错误和一些不需要的引号——console.log("datd");应该是console.log(data);(除非你真的只是想把单词"datd"放进日志中)。

您的jsonList变量有一个有效的对象文字,因此当它像那样直接包含在脚本中时,它将起作用。但该对象文字不是有效的JSON,因此当它包含在单独的文件中以通过$.getJSON()检索时,它将不起作用——在JSON中,所有属性名称都需要引用。所以这行:

"metadata" : { id : 23 },

需要:

"metadata" : { "id" : 23 },

一旦修复,您将需要将处理jsonList的代码移动到您提供给$.getJSON():的回调函数中

$.getJSON('input.json',function(data){
    // do all processing here
});

将来,如果您遇到JSON无法工作的问题,您可以使用此网站验证JSON:http://jsonlint.com/

如果JSON文件中有任何语法错误,它将不返回任何信息。$。getJSON是一个jquery ajax别名,它在后台使用$.parseJSON()(http://api.jquery.com/jQuery.getJSON/)。看,JSON语法与Javascript文本对象语法有点不同,所以如果您像下面那样错过了变量中的一个引号,它将无法按预期工作。

"metadata" : { id : 23 }