将json从文件加载到对象中

Struggling to load json from file (myData.json) on URL into an object so I can access property values.

努力将json从URL上的文件（myData.json）加载到对象中，以便我可以访问属性值。

-- The data loads immediately, I need it a lot in the app.

- 数据立即加载，我在应用程序中需要很多。

-- I'm going to access the data throughout the app, not just as part of one function that happens immediately after the data loads.

- 我将在整个应用程序中访问数据，而不仅仅是在数据加载后立即发生的一个函数的一部分。

-- I've ensured the data in my file is properly formatted json.

- 我确保我文件中的数据格式正确json。

Following the example on the jquery API, shouldn't I be able to do something simple like:

按照jquery API上的示例，我不应该做一些简单的事情：

alert(jqxhr.myProperty);

警报（jqxhr.myProperty）;

and get the value? What step am I missing here? I've tried running eval and a variety of things like

并获得价值？我在这里错过了什么一步？我试过运行eval和各种各样的东西

var myObj=JSON.parse(jqxhr);

var myObj = JSON.parse（jqxhr）;

to no avail.

无济于事。

Please....thank you.

求求你了，谢谢你。

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

3 个解决方案

#1

I think you are making it too complicated :)

我觉得你太复杂了:)

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

the getJSON function automatically converts your response into a proper JSON object. No need to parse.

getJSON函数自动将您的响应转换为适当的JSON对象。无需解析。

You mentioned that you are using this data all over the place, so you will have to wait for the ajax call to complete before the data is accesible. That means either wrapping your entire application in the getJSON callback. Or using a custom event to determine like so:

您提到您在整个地方使用此数据，因此您必须等待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);
       }          
 });

EDIT

编辑

After a quick live debug, the real reason for the data being unavailable was this: javascript that consumes JSON was located in a file include the page document NORTH of inline javascript performing the call. As a result JSON was not a global variable, and scope prevented its usage. If you truly need a variable to be global so it can be used with inline JS as well as any and all included js files, you may do so like this:

快速调试之后，数据不可用的真正原因是：消耗JSON的javascript位于文件中，包括执行调用的内联javascript的页面文件NORTH。因此，JSON不是全局变量，并且范围阻止了它的使用。如果你真的需要一个变量是全局的，那么它可以与内联JS以及任何和所有包含的js文件一起使用，你可以这样做：

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

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

EDIT 2

编辑2

As of jQuery 3.0, callback functions are different: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callback methods are removed as of jQuery 3.0. You can use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead

从jQuery 3.0开始，回调函数是不同的：从jQuery 3.0开始，jqXHR.success（），jqXHR.error（）和jqXHR.complete（）回调方法被删除。您可以使用jqXHR.done（），jqXHR.fail（）和jqXHR.always（）代替

from the comments @mario-lurig

来自@ mario-lurig的评论

#2

the json data is passed to the callback function of $.getJSON. So this would work:

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

#3

I think this would be what you are looking for, you are trying to access the data returned from your call not the caller object itself. In your example, jqxhr is the object that handles the JSON call not the data. So,

我认为这将是你正在寻找的，你试图访问从你的调用返回的数据而不是调用者对象本身。在您的示例中，jqxhr是处理JSON调用而不是数据的对象。所以，

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

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

The very first example on this page is similar to what I explained.

此页面上的第一个示例与我解释的类似。

#1