Monday , 20 November 2017
Home / Programming / JavaScript / Creating JSON Data – JSON Tutorial
Creating JSON Data
Creating JSON Data

Creating JSON Data – JSON Tutorial

This tutorial is a part of the JSON tutorial series. You can view the full list of tutorials by clicking here.

So, let’s get started with creating JSON data. Before we do, let’s set up our files and folders.

Create a file called index.html and a folder called js. Inside your js folder, create a file called script.js. Inside your index.html add this bit of code.

Nothing special going on here besides including our script. So, let’s get started!

Open up your script and add this bit of code.

What we’re doing here is creating 2 objects using object notation. Hold on a minute, aren’t objects created using another method? Well, there are actually a couple of ways to create objects. This way of doing it is called object notation. I talk about which one to use in the advance JavaScript series. For now, the reason we do it this way is because we’re working with JSON. It wouldn’t be called JavaScript Object Notation if we didn’t use object notation.

So, here’s what’s going on, we create 2 variables named person1 and person2. To use object notation, you type opening and closing curly brackets. All data related to our object will be inputted here. JSON data is just keys and values. Keys are the names for each property. If you would like to grab a certain value, then you would use the key name. You do not have to wrap the key name with quotes. Instead of using an equal to assign a value, you would use a colon. You would use commas to separate different values.

That’s it!  JSON is very simple and straightforward. You can store ANY kind of data. This includes strings, numbers, arrays and even objects, but I’m getting ahead here. Let’s now learn how to access these properties.

Add this bit of code into your script.

Just like any other object, to access a property you use dot syntax. We’re simply outputting the value into the document. You use the key name to refer to the value.  Let’s update that line of code to this.

Once again, we’re accessing the person2 object, but in a different way. There are 2 ways to access properties. The first is dot syntax. The other is square bracket notation.  Inside the square brackets, you type in the key name surrounded by quotes. It’s more common to use dot syntax, but you can choose to use square bracket notation if you feel more comfortable with it.

Conclusion

If you really didn’t get any of this, then I recommend you learn the basics of JavaScript first since JSON is based off of JavaScript syntax. In the next tutorial, we’ll learn about nesting objects and accessing nested data in JSON.

About Jasko Koyn

Check Also

Try-Catch Statement

Try-catch Statement – Advanced JavaScript Tutorial

The try-catch statement is a unique way to handle errors. When errors occur, usually it …

One comment

  1. Hi Author,

    You are explaining each of a chapter from the series very smoothly and clearly even a person like me from Asia can understand this, I had a basic knowledge in JavaScript and this why I am feeling comfortable to learning JSON because I am into Hybrid Mobile App development and my peers said that the JSON is very important to do that.

    Many thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *

ULTIMATE WORDPRESS DEVELOPMENT COURSE
Want to learn how to create your own custom WordPress plugins and themes? Check out my course!
Get 93% off my course. You'll also learn how to integrate WooCommerce and BuddyPress into your projects. This is a limited time offer
Yes, I would like to get 93% off your course!
No Thanks!
close-link