[英]Having trouble with JSON and Javascript
I am trying to make a simple sample previewer for my client project. 我正在尝试为我的客户项目制作一个简单的示例预览器。 The list of samples are stored in a JSON file.
样本列表存储在JSON文件中。 but the trouble is that I am not too familiar with using JSON, or programming itself, to be honest.
但麻烦的是,老实说,我不太熟悉使用JSON或编程本身。 I have written a short test code to see if this JSON file works well, but although I can access
sampleData
variable from firebug console, the document.write(sampleData.length);
我编写了一个简短的测试代码来查看此JSON文件是否运行良好,但是尽管我可以从Firebug控制台访问
sampleData
变量,但document.write(sampleData.length);
line seems to be unable to access sampleData
for some reason. 由于某种原因,该行似乎无法访问
sampleData
。 The error shows: 错误显示:
TypeError: sampleData is undefined
TypeError:sampleData未定义
I suspect it has to do with variable scopes, but I am not sure. 我怀疑这与可变范围有关,但我不确定。
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
var sampleData;
$.getJSON('res/Samples.json',function(data){
sampleData=data;
});
document.write(sampleData.length);
</script>
What should I do to make the sampleData
variable to work with the rest of the code? 如何使
sampleData
变量与其余代码一起使用?
I'm sorry I cannot disclose the contents of the json file. 抱歉,我无法透露json文件的内容。 It contains an array of objects containing information of the products.
它包含一个包含产品信息的对象数组。 it looks like
看起来像
[
{
"aaa" : 000000;
},
{
"bbb" : 111111;
},
{
"ccc" : 222222;
}
]
It's a quite generic form of JSON file, as far as I can tell. 据我所知,这是一种非常通用的JSON文件形式。
Your code's fine, but $.getJSON
just starts the process of getting the JSON file, and then allows your code to continue, calling document.write
. 您的代码很好,但是
$.getJSON
只是开始获取JSON文件的过程,然后允许您的代码继续进行,调用document.write
。 The callback to $.getJSON
is called later , after your document.write
call. 在您的
document.write
调用之后 , $.getJSON
会调用$.getJSON
的回调。 Instead, trigger any subsequent code you want to trigger from within the callback. 相反,触发要从回调中触发任何后续的代码。
You can't usefully use document.write
in this situation. 在这种情况下,您无法有效地使用
document.write
。 You can use the DOM, though, and jQuery's various DOM wrapper functions. 不过,您可以使用DOM和jQuery的各种DOM包装函数。 For instance:
例如:
$.getJSON('res/Samples.json',function(data){
$("<p>").html(data.length).appendTo(document.body);
});
It's due to the async response from $.getJSON
. 这是由于
$.getJSON
的异步响应。
var sampleData;
$.getJSON('res/Samples.json', function(data) {
sampleData = data; // This is occurring after the document.write
});
document.write(sampleData.length);
This is essentially the same as: 这基本上与以下内容相同:
var sampleData;
setTimeout(function() {
sampleData = 'Some data'; // This is occurring after the document.write
}, 100);
document.write(sampleData.length);
You could move the document.write
to the response handler but as noted below it does have its drawbacks : 您可以将
document.write
移至响应处理程序,但如下所述,它确实有其缺点 :
var sampleData;
$.getJSON('res/Samples.json', function(data) {
document.write(sampleData.length); // This would replace the page contents
});
It happens asynchronously, so you need to call document.write
in the async call itself: 它是异步发生的,因此您需要在异步调用本身中调用
document.write
:
var sampleData;
$.getJSON('res/Samples.json',function(data){
sampleData = data;
document.write(sampleData.length);
});
Also, if you're using document.write
in your production code to write to the page, I would suggest against it. 另外,如果您在生产代码中使用
document.write
来写入页面,我建议不要这样做。 If you used document.write
in the above example just for debugging purposes (to figure out why it wasn't working), I would suggest using console.log
instead. 如果在上面的示例中使用
document.write
只是出于调试目的(以弄清为什么它不起作用),我建议改用console.log
。 Much easier. 容易得多。
$.getJSON
is an async function and when you do document.write(sampleData.length);
$.getJSON
是一个异步函数,当您执行document.write(sampleData.length);
, sampleData
is not populated yet. ,尚未填充
sampleData
。
You must to do: 您必须执行以下操作:
$.getJSON('res/Samples.json',function(data){
sampleData=data;
document.write(sampleData.length);
});
Well is reason is you call the sampleData.length
before the ajax call return the values you need to put the document.write(sampleData.length); 好吧,原因是您在ajax调用返回需要放入document.write(sampleData.length);的值之前调用了
sampleData.length
; inside the ajax function 在ajax函数内部
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
var sampleData;
$.getJSON('res/Samples.json',function(data){
sampleData=data;
document.write(sampleData.length);
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.