从文件中加载JSON到对象中

Question

我无法从URL中的文件（myData.json）加载JSON并将其放入对象中，以便我可以访问属性值。

-- 数据会立即加载，但我需要在应用程序中频繁使用它。

-- 我将在整个应用程序中访问数据，而不仅仅是在数据加载后立即执行的某个函数中。

-- 我已确保文件中的数据格式正确为JSON。

根据jquery API上的示例，我应该能够像这样做一些简单的事情：

alert(jqxhr.myProperty);

并获得它的值？我错过了哪个步骤？ 我尝试过运行eval和各种操作，例如

var myObj=JSON.parse(jqxhr);

但都没有成功。

拜托了...谢谢。

// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.getJSON("example.json", function() {
  alert("success");
})
.success(function() { alert("second success"); })
.error(function() { alert("error"); })
.complete(function() { alert("complete"); });

// perform other work here ...

// Set another completion function for the request above
jqxhr.complete(function(){ alert("second complete"); });

- Slopeside Creative

Answer 1

我认为你把它搞得太复杂了 :)

 var JSON;

 $.getJSON('example.json', function(response){
       JSON = response;
       alert(JSON.property);
 })
 //feel free to use chained handlers, or even make custom events out of them!
 .success(function() { alert("second success"); })
 .error(function() { alert("error"); })
 .complete(function() { alert("complete"); });

getJSON函数会自动将响应转换为一个合法的JSON对象，无需解析。

您提到正在各个地方使用此数据，因此必须等待ajax调用完成后才能访问数据。这意味着要么将整个应用程序包装在getJSON回调中，要么使用自定义事件来确定，如下所示：

 var JSON;

 $(window).on('JSONready', function(){
       alert(JSON.property);
 });

 $.getJSON('example.json', function(response){
       JSON = response;
       $(window).trigger('JSONready');
 });

 $('#elem').on('click', function(){
       //event likely to take place after ajax call has transpired
       //it would still be better to assign this listener in a callback, 
       //but you can get away with not doing it, if you put in a catch
       if(JSON){
           alert(JSON.property);
       }          
 });

编辑

在快速的现场调试之后，数据不可用的真正原因是：消耗JSON的JavaScript位于包含页面文档的内联JavaScript执行调用NORTH文件之上。因此，JSON不是全局变量，范围阻止了它的使用。如果你确实需要一个变量成为全局变量，以便可以与内联JS以及所有包含的JS文件一起使用，可以这样做：

  (function(){
      var limitedScopeVariable = 25;
      window.globalScopeVariable = 30;
  })();

  $(function(){
       alert(globalScopeVariable); //works!
       alert(limitedScopeVariable); //fails!
  });

编辑2

从jQuery 3.0开始，回调函数有所不同：jqXHR.success()、jqXHR.error()和jqXHR.complete()回调方法已于jQuery 3.0版本中删除。您可以使用jqXHR.done()、jqXHR.fail()和jqXHR.always()代替。

来自@mario-lurig的评论

- Fresheyeball

---

不过那样行不通。alert(JSON.property);会在回调被调用之前执行。 - Felix Kling

你可以随意使用它们 ;) 你想让我将它们复制粘贴到我的回答中吗？ - Fresheyeball

如果你有其他问题，请在Skype上联系我，我会帮助你追踪并解决它。 - Fresheyeball

[e-mail]（这是雅虎） - Slopeside Creative

自jQuery 3.0起，回调函数有所不同：在jQuery 3.0中，jqXHR.success()、jqXHR.error()和jqXHR.complete()回调方法已被移除。您可以使用jqXHR.done()、jqXHR.fail()和jqXHR.always()代替。 - Mario Lurig

Answer 2

JSON数据传递给$.getJSON的回调函数。因此，以下代码可以正常工作：

var jqxhr;

$.getJSON("example.json", function(data) {
  jqxhr = data;
});

// alert(jqxhr.property);
// caution: this won't work immediately on load, since the ajax call runs asynchronously and hasn't finished at that time

// it should be available at a later time, like a click event
$('a#something').click(function(){
     if(jqxhr){
          alert(jqxhr.property);
     }else{
          alert('getJSON not yet complete or failed');
     }
});

- Andy

---

我正在JQuery调用中加载数据，该调用在document.onLoad（）触发之前发生，因此我预计它会可用。直到onLoad（）被触发之前，开始按钮才会显示。 - Slopeside Creative

@Fresheyeball，在下面一行指出可能的陷阱并建议解决方案有什么问题吗？ - Andy

因为你正在展示绝对行不通的东西作为可能的陷阱。解释为什么可能的解决方案是必要的很好，但那就是它的目的。它不应包括我们都知道行不通的技术演示。请注释掉该行代码，并注明这是一个不起作用的示例，我会为你点赞。 - Fresheyeball

Andy，我正在尝试这段代码（请看我的回答），但无法访问getJSON函数之外的属性。我感到困惑。难道人们不经常这样做吗？ - Slopeside Creative

@SlopesideCreative，问题正是我在我的答案中描述并与Frescheyball讨论过的。当您在getJSON之外调用alert（）时，getJSON仍在运行，并且尚未返回任何数据。因此，yourDATA仍然未定义。 - Andy

@SlopesideCreative 或许这个例子能更清晰地解释一下：http://jsfiddle.net/KK7Lp/ - Andy

Answer 3

我认为这可能是你要找的，你试图访问从调用返回的数据而不是调用对象本身。在你的例子中，jqxhr是处理JSON调用的对象，而不是数据本身。因此，

$.getJSON("example.json", function(data) {
  yourDATA = data;
})

//Use your data here
alert(yourDATA.aProperty);

这个页面上的第一个例子与我所解释的类似。

- Kumsal Obuz