Contact Information

KodeBlog

We're Available 24/ 7. Drop us an email.

JavaScript JSON

JSON stands for JavaScript Object Notation. It is a light weight data format that uses key value pairs to store data. JSON files end with the extension *.json. JSON is commonly used for configuration files and with APIs due to its light weight and simplicity of use.

JavaScript is used a lot on the front end to interact with JSON APIs on the background. In this lesson, we will learn how to work with JSON files.

Topics to be covered

We will cover the following topics in this lesson

Lesson Prerequisites

For you to successfully complete this lesson, you should have the following requirements

  • NodeJS - we will be executing JavaScript files directly using NodeJS from the command line. Alternatively you can execute the files in the web browser but that takes a a little more time and involves working with multiple programs.
  • Web Browser - a web browser can be used as an alternative to executing JavaScript files that we will be working with.
  • Visual Studio Code - we will be using it as the code editor. It comes with a built-in terminal that will allow us to easily execute JavaScript code from within the text editor. You can also use any code editor that you prefer.
  • JavaScript Basics - this is an added advantage and not mandatory. We will explain every piece of code covered in these lessons.

Lesson Practical Examples Project Setup

This is a practical based lesson. For you to successfully work out the examples given in this lesson, you will need to setup the following directories and files

Create a new directory called javascript-json

Open the directory javascript-json in Visual Studio Code or your favorite code editor

Create the following files inside your project folder.

  • json.js - this file will be used to for code dealing with the switch statement

The following visualizes our project setup

javascript-json
-json.js

JSON File Format

The file format for JSON is as follows

{
    "key":"value"
}

Multiple values are separated using commas like so

{
	"key_1":"value_1",
    'key_2':"value_2"
}

JSON Supported Data Types

Basically all JavaScript types are supported by JSON. The following example shows how to work with various JSON data types within JavaScript.

{
    "string":"string type",
    "number":89,
    "colors": [
        "red",
        "blue",
        "brown"
    ],
    "employee": {
        "name":"John Doe",
        "gender":"Male"
    },
    "is_admin":false
}

HERE,

  • "string":"string type", defines a standard string
  • "number":89, defines a standard numeric value
  • "colors": [...] defines a standard JavaScript array
  • "employee": {...} defines a standard JavaScript object
  • "is_admin":false defines a standard JavaScript boolean field

Now that we have covered the basics of JSON, let's look at a practical example.

JavaScript JSON Parser

By default, JSON is treated as a string in JavaScript. But JavaScript has a built in function JSON.parse that is used to convert valid JSON string into a JavaScript object that we can work with. Let us look at a practical example.

Open the file json.js and add the following code

let json_string = `{
    "string":"string type",
    "number":89,
    "colors": [
        "red",
        "blue",
        "brown"
    ],
    "employee": {
        "name":"John Doe",
        "gender":"Male"
    },
    "is_admin":false
}`;

console.log(json_string);
console.log(typeof json_string);

HERE,

  • let json_string = ... defines a string that contains valid JSON.
  • console.log(json_string); prints the value of the variable json_string to the console
  • console.log(typeof json_string); prints the data type to the console

Open the terminal in Visual Studio Code then run the following command to execute our JavaScript file

node json.js

You should be able to get the following results

{
    "string":"string type",
    "number":89,
    "colors": [
        "red",
        "blue",
        "brown"
    ],
    "employee": {
        "name":"John Doe",
        "gender":"Male"
    },
    "is_admin":false
}
string

Let's now modify the above example and convert our JSON string to a valid JavaScript object like so

let json_string = `{
    "string":"string type",
    "number":89,
    "colors": [
        "red",
        "blue",
        "brown"
    ],
    "employee": {
        "name":"John Doe",
        "gender":"Male"
    },
    "is_admin":false
}`;

let json = JSON.parse(json_string);

console.log(json);
console.log(typeof json);

HERE,

  • let json_string = ... defines a JSON string
  • let json = JSON.parse(json_string); defines a variable json that is assigned the return value of the function JSON.parse(json_string) which is accepting our string variable json_string as an argument.
  • console.log(json); logs the results to the console
  • console.log(typeof json); prints the data type of the variable json to the terminal

Run the following node command

node json.js

You should be able to get the following results

{ 
  string: 'string type',
  number: 89,
  colors: [ 'red', 'blue', 'brown' ],
  employee: { name: 'John Doe', gender: 'Male' },
  is_admin: false 
}
object

A valid JavaScript object.

The following code shows you how to access the object properties

console.log(json.string); //outputs string type
console.log(json.number); //outputs 89
console.log(json.colors); //outputs [ 'red', 'blue', 'brown' ] 
console.log(json.employee); //outputs { name: 'John Doe', gender: 'Male' }
console.log(json.employee.name); //outputs John Doe
console.log(json.is_admin); //outputs false

Executing the above code produces the following results

string type
89
[ 'red', 'blue', 'brown' ]
{ name: 'John Doe', gender: 'Male' }
John Doe
false

Summary

JSON standards for JavaScript Object Notation and it is pronounced as "Jason". It is a light weight data format that used a pair of keys and values to store data. It is commonly used in configuration files and APIs. JavaScript has a built-in function JSON.parse that is used to convert JSON strings to JavaScript objects that can be accessed using the dot notation.

Author: Rodrick Kazembe

Rodrick is a developer who works on Desktop, Web and Mobile Applications. He is familiar with Python, Java, JavaScript, C++, C#, Kotlin, PHP, Python and the list goes on. Rodrick enjoys sharing knowledge especially when it comes to technology.

JavaScript Arrays

JavaScript Functions

Leave A Reply