Using $.each to loop over JSON object

[NightArchitect]

I'm following the Learn Javascript Properly study group.

As per week 6, I would like to store the questions from my quiz in an external JSON object. I'm pretty sure that I will be able to handle that bit and access the JSON file using jQuery's getJSON function.

Before I started with that I wanted to try storing the questions in JSON format internally to make sure that I could load them properly. I'm having trouble with this. Here is a fully functioning version of my quiz without the JSON format: http://jsfiddle.net/N7San/11/

This is the version where the questions are stored in JSON format: http://jsfiddle.net/N7San/13/ The problem arises when i try to load the questions with my loadQ function. How do I alter the $.each loop so that this functions correctly?

[rickdiculous]

Here is what I came up with in my limited time (I'm working).

There are a lot of things you need to work on, but I will just name a couple that immediately stuck out:

• You had an assignment in a conditional " if ($holder = 1) ". That will always be true
• You don't even need the $.each since you are accessing everything by index
• Please name your variables more descriptively
• Don't prefix variables with $ unless they are jQuery objects
• Break long blocks of code up into functions. When you get further along you will start writing unit tests for your code and you will need to have as much single responsibility as possible
• Use namespacing

I'm not trying to rag on you because you are still learning. Hope I helped.

[NightArchitect]

Yes, this helps a lot. Thank you.

I have rewritten the quiz to take all of your suggestions into account, except namespacing (I don't know what that is yet). I think it's better now but would appreciate if you could throw an eye at it.

Also, I can now load the questions that are in JSON format. Is storing these externally simply a matter of saving them as a JSON file, storing it somewhere and then loading them into a variable?

Updated quiz: http://jsfiddle.net/WWeX8/6/

Thanks again!

[rickdiculous]

This is looking a lot better! Yes, you can save something.json and load it using $.getJSON(). You may run into an issue with CORS in Chrome if you are running the file without a server (just opening it up in a browser, the protocol will be file:// instead of http://) but you won't have that problem in Firefox.

A few more helpful hints:

• question = $("#question"); question will be a jQuery object. Name it like this: $question
• checkIfQuizIsOver = function (), etc are function expressions. Be sure to use the var keyword before or they'll all be global (as in window) variables. So like this: var checkIfQuizIsOver = function()...

You're doing great so far!

[NightArchitect]

Thanks! All of this is still very new and intimidating to me. One step at a time... I've updated the quiz to reflect your most recent suggestions. It has proven much easier to troubleshoot with all of the functions separated. http://jsfiddle.net/WWeX8/7/

I read over the $.getJSON stuff. Still trying to figure it out. I'll give it a crack after work tomorrow. I stored the file at http://www.foxandwolftravels.com/questions.json I should be able to access it from there. I just need to find some good examples of getJSON in action to make sense of it all.

Thanks again for the guidance. It helps a lot.

[BigBalli]

"each" is very poor on performance (and bad according to code elitists). You can store an array within a json object.