JSON Tutorial - Learning JSON w/ jQuery

This quick tutorial is aimed to help beginners understand what JSON is and why it shouldn't be something to get concerned about when dealing with it for the first time.

There are many more examples that could be shared and explained but this is my intro to dealing with JSON.

Enjoy :)

[eklemen]

As a web designer trying to learn my way around JSON using JQuery, this is the best beginner tutorial I've found so far. Thank you very much! Now onto learning the most efficient way to loop through a more complex JSON file to return content to an HTML page. :)

[rfgraham]

Thanks for the kind words.
For looping, use the jQuery each function to loop over the objects or arrays. For example, assuming we're using the 'data' variable in this video to pull in the JSON and the JSON has 3 objects instead of one but each have the same keys:

{ "firstName": "John" },
{ "firstName": "Chris" },
{ "firstName": "Brian" }

$.each(data, function(key, value){
console.log(value.firstName + ", ");
}

Would spit out "John, Chris, Brian"

[rfgraham]

What you're showing me here is an array, not json. If you're looking for parsing keys, then one would simply need to setup a new object.

{
"key1" : {},
"key2" : [],
"key3" : "string"
}

First key leads to another object while the second goes to an array, the third is a single value.

[slaythevirus]

What Program Did You Use? (Not To Record)

[rfgraham]

This is because Chrome doesn't allow local AJAX. The error you're receiving would be the same if you were trying to AJAX data from another site, which you cannot. This is the Cross Domain Security error you're getting. If you'd like to AJAX your JSON, load it up on your web host and then test.

[ksamuelchris]

Is it possible to create a JSON request from a local environment? For example if my Rest API is installed locally through a Python/Django server and I am using WebStorm to follow your tutorial adding the URL and getting
[
"Linac",
"LBT",
"Booster",
"BST",
"Storage Ring"
]
as the JSON array

[nickk]

Great Tutorial for a beginner. Thanks! However, this only works in FF. I received this error in Chrome. "xhr cannot load Origin null is not allowed by Access-Control-Allow-Origin." had to use an AJAX call instead to make it work in all. Any ideas on the error?

[mikelenyon]

Excellent intro to using jQuery for JSON. I was also hoping to see the other side with a PHP script interacting with the JavaScript, which is very likely the popular scenario.

[rfgraham]

I apologize about my lateness of replying. Since Youtube's new UI released I don't see notifications as easily.

At a glance though your code looks good to me :)

[MrTcm]

Hey Rob,
Could you please tell me how to loop through each object in a JSON Array?
Like a for-loop, but rather than setting an interger and stopping it when you get to the same size as a number, getting it instead to loop through the compete JSON file without knowing how much is there? Is that possible? not sure i've worded this right...

[rfgraham]

As long as you're running a virtual server and not trying to access the files directly i don't see a reason why it wouldn't work.

[ksamuelchris]

How would you parse a json file that simply had Keys

like ["Linac", "LBT", "Booster", "BST", "Storage Ring"]

[SuperToughnut]

Good stuff. JavaScript has come a long way since I last used it. The syntax reminds me of Lua. Good video.

[georgigeorgiev]

Thank you very much for this tutorial.
GOD bless you and keep you.

[barnabiofskies]

Thank you! Great tutorial. It's so hard to find tutorials as useful as these. Keep 'em coming.

[nickk]

Yup. Right on the money. uploaded to a server and it works fine on FF and Chrome. Thanks!!

[e-m]

thanks, very clear quick info about Json, just what I needed

[MarkWilder]

Great show multiple.. Like in a list how would you get a list of items?

Thanks

[eyalankri]

Thank you very much. That's how should Video Tutorial look like!

[rfgraham]

Lol, the program says what it is at the top. Sublime Text 2