Question

143

load json from file into object

rated 0 times [ 149] [ 6] / answers: 1 / hits: 32336 / 12 Years ago, tue, june 12, 2012, 12:00:00

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

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

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

alert(jqxhr.myProperty);

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

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

payne

Add To Favorites

Follow

Total Points: 527

Total Questions: 108

Total Answers: 88

Location: Tajikistan

Member since Thu, Apr 14, 2022

2 Years ago

payne questions

1 Making API calls out of React Functional Component

Thu, Sep 3, 20, 00:00, 4 Years ago

1 Click Event Not Firing for Jest

Tue, Aug 18, 20, 00:00, 4 Years ago

1 Why doesn't Intl.NumberFormat work with units in Safari and Firefox?

Fri, Mar 6, 20, 00:00, 4 Years ago

1 How to pass integer values in cucumber test and verify the result

Tue, Nov 13, 18, 00:00, 6 Years ago

1 Using readline in Node.js

Thu, Oct 11, 18, 00:00, 6 Years ago

View All

answered 12 Years ago joannam · Accepted Answer

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.

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:

 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:

  (function(){

      var limitedScopeVariable = 25;

      window.globalScopeVariable = 30;

  })();



  $(function(){

       alert(globalScopeVariable); //works!

       alert(limitedScopeVariable); //fails!

  });

EDIT 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

from the comments @mario-lurig