What is JSON
Tags: json, javascript, jsonstringify, jsonparse
Published: 2023-04-07 12:21:09

JavaScript Object Notation (JSON) is a lightweight text-based format for storing structured data that can be assembled, parsed and generated by JavaScript and other C-family ( C, C++, C#, Java, JavaScript, Perl, Python) programming languages.

# Uses of JSON

JavaScript Object Notation (JSON) is used for parsing data interchangeably across multiple or different systems such as transferring data from a backend server to the frontend of an application or vice-versa.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/67rqaxe3m1gc9fkmib4o.png)

Data in JSON are stored in curly braces `{}`, as key and value pairs, wrapped in double-quote `("")` and separated by a colon `(:)` while a comma `(,)` is used to indicate the end of a particular key and value pair. This makes it easy to read and write by humans.

# How to Create a JSON file

To create is JSON file, create a file and give it any name of your choice and then save it with a JSON (`.json`) file extension.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6l57lqz4q71gnjt5rd67.png)

After you must have created the file, start creating the data of the object you want directly in your JSON file.

```json
{ 
    "firstName":"John", 
    "LastName":"Plum",
    "occupation": "web Developer",
    "Hobbies": ["Reading", "Coding", "Basket Ball", "Football", "Movies", "Music"],
    "married" : true,
    "Age" : 29
}
```

From the code example above, The JSON file is used to store the information of a person with a `firstName` of `John` together with his `lastName` and other information.

JSON can take up any valid JavaScript data type as a value pair, these include;

1. String
    
2. Number
    
3. Boolean (true or false)
    
4. Null
    
5. Array
    
6. Object
    
7. Infinity
    
8. NaN
    

However, it's important to note that, we can also create JSON files in an array object syntax. For example

```json
[
    { 
    "firstName":"John", 
    "LastName":"Plum",
    "occupation": "web Developer",
    "Hobbies": ["Reading", "Coding", "Basket Ball", "Football", "Movies", "Music"],
    "married" : true,
    "Age" : 29
}
]
```

Here, square brackets are used as the starting point.

# Static Methods

Depending on the environment you are working on, you will sometimes be required to parse the JSON file to function in a new environment.

Parsing in this context means converting it from either an object to a string or string to an object.

There are two *static methods* available in JSON for doing this, which is;

* JSON.stringify()
    
* JSON.parse()
    
## JSON.stringify()

The `JSON.stringify()` static method is used to convert the JSON object into a string. This is used in a JavaScript environment.

However, keep in mind that a valid JSON object syntax is a valid object in JavaScript.

To see how this works, copy the JSON code below and paste it into a JavaScript file and then store it in a variable called `person`.

*Try the code example below.*

```javascript
let person = { 
    "firstName":"John", 
    "LastName":"Plum",
    "occupation": "web Developer",
    "Hobbies": ["Reading", "Coding", "Basket Ball", "Football", "Movies", "Music"],
    "married" : true,
    "Age" : 29
}
```

The above code is a valid JavaScript object and we can access the properties (keys and values) as an Object.

*Try the code example below.*

```javascript
console.log(person);
```
Preview


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zjn6cie8mpu43gr4uw67.png)

Here, from the console. The `person` object returns a `prototype` of `Object`.

Now that we have returned the person object and checked the prototype in JavaScript. Let's see how the `JSON.stringify()` method can be used to convert the object into a string.

*Try the code example below.*

```javascript
const newPersion = JSON.stringify(person)
console.log(newPersion)
```
Preview

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0eh3rqdr21isps49ktx2.png)

Here, The `person` object is stored in `newPersion` variable and then the `JSON.stringify()` method is used to parse the object into a string.

from the console preview, notice the syntax highlighting has changed and no prototype is returned compared to the first example. This is because the `newPerson` is not an `Object` but a `string`.

We can use the `typeof` operator to confirm these.

*Try the code example below.*

```javascript
console.log(typeof newPersion)
```

Preview

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0f9gyh33htp9k2z4upup.png)

From the browser preview, a `string` is returned as the data type.

## JSON.parse()

The `JSON.parse()` does the reverse opposite of the `JSON.stringify()` does. It simply converts the JSON string into an Object.

*Try the code example below.*

```javascript
let person = { 
    "firstName":"John", 
    "LastName":"Plum",
    "occupation": "web Developer",
    "Hobbies": ["Reading", "Coding", "Basket Ball", "Football", "Movies", "Music"],
    "married" : true,
    "Age" : 29
}

const newPersion = JSON.stringify(person)

const newPersion2 = JSON.parse(newPersion);

console.log(newPersion2)
```

Preview


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ypcs26vx43ow3cleqfy6.png)

Here, the `JSON.parse()` method is used to convert the `newPersion` back to an Object.

However the JSON string can also be written in a different style, that is using the backticks to wrapper wrap around the curly braces.

*Try the code example below.*

```javascript
let person2 = `{ 
    "firstName":"John", 
    "LastName":"Plum",
    "occupation": "web Developer",
    "Hobbies": ["Reading", "Coding", "Basket Ball", "Football", "Movies", "Music"],
    "married" : true,
    "Age" : 29
}`;

console.log(person2)
console.log(typeof person2)
```

Preview

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q16aaumv8y7g4dzgc0p3.png)

From the preview above, the `persion2` JSON object is returned as a string.

# Wrapping up

We learned about *what is JSON* and we discussed the following.

* What is JSON
    
* Uses of JSON
    
* How to create a JSON file
    
* JSON.stringify()
    
* JSON.parse()
    

Alright! We’ve come to the end of this tutorial. Thanks for taking the time to read this article to completion. Feel free to ask questions. I’ll gladly reply. You can find me on Twitter and other social media @ocxigin. or email me at ocxigin@gmail.com

*Cheers*