2

我正在尝试基于某些约束动态创建一个select包含对象属性的简单对象。option

当我的 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);
});

但是当我尝试将 JSON 放入单独的 .json 文件并使用$.getJSON时，我没有任何成功。基本上，控制永远不会进入它。

这是我写的代码$.getJSON

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

有人可以指出我的错误是什么。

干杯，哈沙

4

3 回答 3

4

您正在尝试在 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”这个词放入您的日志中）。

于 2013-08-15T21:24:54.220 回答
3

您的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/

于 2013-08-15T21:25:57.370 回答
0

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

"metadata" : { id : 23 }
于 2013-08-15T21:32:26.333 回答