Javascript $.getJSON不起作用，但在脚本中使用JSON对象可以起作用

我试图动态创建一个简单的select，它包含一个对象的属性，作为基于一些约束的选项

当我的JSON是脚本的一部分时，一切正常

代码

$(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);
});

有人能指出我的错误吗

干杯，

---

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.logdatd；应该是console.logdata；除非您真的只想将单词“datd”放入日志中。

您的jsonList变量具有有效的对象文字，因此直接包含在您的脚本中时，它可以正常工作。但该对象文本不是有效的JSON，因此当包含在单独的文件中以便通过$.getJSON检索时，它将不起作用-在JSON中，所有属性名称都需要被引用。所以这一行：

"metadata" : { id : 23 },

……需要：

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

修复后，需要将处理jsonList的代码移动到提供给$.getJSON的回调函数中：

---

将来，如果您遇到JSON不工作的问题，您可以使用以下网站验证JSON:

如果JSON文件中存在任何语法错误，它将不返回任何内容。$。getJSON是一个jquery ajax别名，它在后台使用$.parseJSON。 看，JSON语法与Javascript文本对象语法有点不同，所以如果您在变量中漏掉了一个引号，就像下面所做的那样，它将无法正常工作

"metadata" : { id : 23 }

---

哇，既然你和@nnnnnn的答案对我都有帮助，我不知道从这两个答案中选择一个作为答案！你应该投票选出所有对你有帮助的答案，并接受对你帮助最大的答案。如果他们帮助你平等地接受了第一个帖子，或者，正如格里姆所说，接受了代表总数较低的人的帖子，那么无论哪种方式，这都是格里姆的答案。

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

"metadata" : { id : 23 }