遇到JSON和Javascript问题

I am trying to make a simple sample previewer for my client project. The list of samples are stored in a JSON file. but the trouble is that I am not too familiar with using JSON, or programming itself, to be honest. 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); line seems to be unable to access sampleData for some reason. The error shows:

我正在尝试为我的客户端项目制作一个简单的示例预览器。样本列表存储在JSON文件中。但问题是,我不太熟悉使用JSON或编程本身,说实话。我编写了一个简短的测试代码来查看这个JSON文件是否运行良好,但是我可以从firebug控制台访问sampleData变量,document.write(sampleData.length);由于某种原因,行似乎无法访问sampleData。错误显示:

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?
I'm sorry I cannot disclose the contents of the json file. It contains an array of objects containing information of the products. it looks like

我该怎么做才能使sampleData变量与其余代码一起使用?对不起,我不能透露json文件的内容。它包含一系列包含产品信息的对象。看起来像

[
    {
    "aaa" : 000000;
    },
    {
    "bbb" : 111111;
    },
    {
    "ccc" : 222222;
    }
]

It's a quite generic form of JSON file, as far as I can tell.

据我所知,它是一种非常通用的JSON文件形式。

5 个解决方案

#1

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. The callback to $.getJSON is called later, after your document.write call. Instead, trigger any subsequent code you want to trigger from within the callback.

你的代码很好,但$ .getJSON只是启动获取JSON文件的过程,然后允许你的代码继续,调用document.write。在您的document.write调用之后,稍后将调用$ .getJSON的回调。而是在回调中触发您想要触发的任何后续代码。

You can't usefully use document.write in this situation. You can use the DOM, though, and jQuery's various DOM wrapper functions. For instance:

在这种情况下,您无法有效地使用document.write。但是,您可以使用DOM和jQuery的各种DOM包装函数。例如:

$.getJSON('res/Samples.json',function(data){
    $("<p>").html(data.length).appendTo(document.body);
});

#2

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

#3

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. 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. Much easier.

此外,如果您在生产代码中使用document.write写入页面,我建议不要这样做。如果你在上面的例子中使用document.write只是为了调试目的(弄清楚它为什么不工作),我建议改用console.log。更容易。

#4

$.getJSON is an async function and when you do document.write(sampleData.length);, sampleData is not populated yet.

$ .getJSON是一个异步函数,当你执行document.write(sampleData.length);时,还没有填充sampleData。

You must to do:

你必须这样做:

$.getJSON('res/Samples.json',function(data){
   sampleData=data;
   document.write(sampleData.length);
});

#5

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); inside the ajax function

好吧,原因是你在ajax调用之前调用sampleData.length返回你需要放置document.write(sampleData.length);在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>

#1