$.getJSON没有'不起作用,但在脚本中包含JSON对象起作用
$.getJSON doesn't work but having the JSON object in the script works
我正试图根据一些约束动态创建一个简单的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 }
- 当包含另一个asp文件时,是否也包含所有引用的样式和脚本页面
- 在Debian中运行包含load()和print()函数的JS脚本
- 建议将包含不同参数的内联JS转换为外部脚本
- 我发现了一些只在移动设备上可见的垃圾邮件链接,我可以'找不到包含此垃圾邮件链接的脚本的位置
- 从我自己的脚本中包含的Javascript文件中调用一个函数
- 在包含脚本的地方注入HTML
- 是否在Script Src标记中包含Script<脚本>(JavaScript等)
- 在脚本标记中包含一个javascript文件
- 如何从PHP文件输出javascript文件,该文件可以从脚本包含标记中引用
- 在 AngularJS 中将脚本包含在控制器、工厂和服务中
- Chrome扩展程序修改页面的脚本包含和JS
- 当其他JS脚本包含在html页面中时,Ajax请求不起作用
- 当我试图将js脚本包含在head部分时,它不会包含在我的文件中
- 有没有一种方法可以将脚本包含到fancybox内容中
- jQuery单击通过脚本包含的元素
- 如何将JS脚本包含到页面的一部分
- 将JS脚本包含到meteor中
- 如何将脚本包含在angularjs中
- 如何在没有所有脚本文本的情况下将脚本包含到我的cshtml文件中
- 如何将jQuery脚本包含到include.js文件中