Home » Tutorials » JavaScript » JSON Introduction

JSON Introduction

In JavaScript, JSON stands for JavaScript Object Notion. Notion is simply the syntax of how something is written. Basically, we are dealing with JavaScripts objects, but we are using the idea of JSON. JavaScript gives JSON a few special functions, but we will get to these later. It should be said that, in JavaScript, we can have JSON objects and JSON arrays, but I will not be highlighting the difference in this tutorial as we will only work with objects. JSON arrays are just an array of JSON objects, so I don’t really consider them to be much different that real arrays.

So, what is JSON and why should you care? You should care because JSON has revolutionized how to transfer information because of its simplicity and functionality. Sure, you can transfer data using XML, raw text, or some other structured data, but how easily is that integrated with JavaScript? Since it is JavaScript Object Notion, JSON is obviously integrated quite well with JavaScript. You can use JSON inside your code as a type of variable if you want, but it is most useful for requests made by AJAX. I won’t dive into detail on how to transfer data using JSON with AJAX in this tutorial, but we will create a JSON object. Let’s create some JSON:

Example
var people = { “firstName”:”Jared” , “lastName”:”Drake” }
document.write(people.lastName);

This is a very simplistic example of JSON, which really is not that much different that creating another object in JavaScript. We create an object variable people that is set to this odd little string. The string is actually 2 separate variables or properties: “firstName” and “lastName”. Yes, those variables or object properties are defined in quotes because that is how JSON is written. Following those properties, we have a colon and then what looks like another variable or property. Technically, it is a property of the preceding variable, but for our purposes think of it as a simple string. The same thing occurs for the next variable. That seems easy enough, but how does document.write(people.lastName); know to print out “Drake”? Like I said, people is an object with “firstName” and “lastName” as properties. So, when you tell JavaScript to write out people.lastName, it looks at the people object and sees that it does have a “lastName” property. Then, it prints out the contents of that property, which is “Drake”.

I know that is a little difficult to wrap our heads around, but JSON is very useful for transferring data. Look at the structure of the example we created. We have just one ultimate variable name, that has ordered internal properties, which helps us reduce variable collisions or overwrites in our JavaScript.

References



Link/cite this page

If you use any of the content on this page in your own work, please use the code below to cite this page as the source of the content.

  • Stewart, Suzy. "JSON Introduction". After Hours Programming. Accessed on March 18, 2024. https://www.afterhoursprogramming.com/tutorial/javascript/json-introduction/.

  • Stewart, Suzy. "JSON Introduction". After Hours Programming, https://www.afterhoursprogramming.com/tutorial/javascript/json-introduction/. Accessed 18 March, 2024.

  • Stewart, Suzy. JSON Introduction. After Hours Programming. Retrieved from https://www.afterhoursprogramming.com/tutorial/javascript/json-introduction/.



0 thoughts on “JSON Introduction”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.