Store JSON data in a variable

[GSG]

http://codepen.io/gsg/pen/LEEeMg

I’m trying to access data from a JSON file but the result of the console is undefined.

The GET response is good, the function works but I don’t know how to access the response.

[__]

AJAX is not (shouldn’t be) synchronous. This means that you cannot return the response to a var by assigning the the function call. (Even if you could, you’re not: your AJAX_JSON_req doesn’t return anything at all. You’re returning the ajax response inside the onReadyStateChange callback. This function is an event listener: it is triggered by the readystatechange event, not called form your code. Nothing can be done with its return value.)

Whatever you want to do with the ajax response needs to be done in your callback. e.g.,

AJAX_req.onreadystatechange = function() {
    if(AJAX_req.readyState == 4 && AJAX_req.status == 200){
        var response = JSON.parse(AJAX_req.responseText);
        console.log( response );
        //  ^---- in here  :)
    }
};
// <---- not out here :(  ---->

You might be interested in the promise js library: promises make async functions a lot easier to think about, and promisejs also has built-in ajax functions.

[GSG]

@traq – Thanks for your explanation.

I have another question: I have a list of questions and one of the task is to store them separate into a JSON file, but it looks like a pain in the ass at the moment…

What is the point of storing them separatly? Why I can’t let them in the same file as the rest of the code?

[__]

I’m not quite sure what you’re asking, but in any case I couldn’t answer without some context.

I have a list of questions and one of the task …

Is this something you’re trying to build? study? homework?

one of the task is to store them separate into a JSON file

what is “them”?
what do you mean by “store” (are you talking about saving user input)?

Some general reasons for storing something in a separate file are organization, security, reusability (and by extension, flexibility)… hard to say without knowing what you’re trying to do.

[GSG]

@traq – I’m building the quiz application from “How to learn JS properly” guide and one of the tasks is to store the quiz questions(an array of objects) in an external JSON file but doesn’t explain why I should do the task.

My quiz questions:

var questions = [{question: 1}, {question: 2}, {question: 3}];

So why I should separate them from the other code?

[__]

Most likely reason is to make the data easy to maintain — e.g., adding or removing questions is easier if they are organized in a simple format, separately from the actual application code. (To clarify, note that, strictly speaking, the questions and answers aren’t “code”: they’re data.)

Reading about “separation of concerns” might be helpful as well. It might be difficult to see the advantage with such a small project, but it certainly is a habit worth developing.

[GSG]

@traq – I understood.

In my case(the quiz app), my code depends entirely on that data(the questions), so I should insert all of the code in the callback function?

[Author]

Posts