JavaScript Object Notation

JSON is a syntax derived from Javascript object notation syntax, but the JSON format is text or string only( meaning JSON is a string form of an object). It is a plain text and lightweight data interchange format used to send and store data between computers. It provides a simple and human-readable format for representing structured data as text. JSON is commonly used in web development for transferring data between a server and a web application (the client). JSON follows a specific syntax, consisting of key-value pairs enclosed in curly braces {}. Keys must be strings, followed by a colon(:)

The main purpose of JSON is to provide a standardized way to structure data that can be easily understood and processed by different programming languages. It uses a combination of key-value pairs and arrays to represent complex data structures.

Javascript Objects

JavaScript Object and JSON are very similar in that we can change JSON to Object and vice-versa

The major difference between objects and JSON is that the key value of JSON should be in double quotes, or rather, should be a string.

Converting JSON to JavaScript Object

In JavaScript, the keyword JSON has parse() and stringify() methods that are used in the conversion

JSON.parse()

It is used when we want to change the JSON to an object. The JSON.parse() function takes a JSON string as its input and returns the corresponding JAvascript object or value based on the JSON data

JSON.parse() can convert JSON strings into the following JavaScript data types:

Object: JSON objects are converted into JavaScript objects.

Array: JSON arrays are converted into JavaScript arrays.

String: JSON strings are converted into JavaScript strings.

Number: JSON numbers (integer or floating-point) are converted into JavaScript numbers.

Boolean: JSON True and false are converted into JavaScript booleans.

null: JSON null is converted into JavaScript null

Reviver Function

It is an optional parameter passed to JSON.parse(). The Reviver function allows you to transform or filter the parsed data during the conversion process. It can be used to modify or selectively parse the JSON values

JSON.stringify()

It is used when we want to change the object to JSON. The stringify method takes one required parameter and two optional parameters. The replacer is used as a filter, and the space is an indentation. This is done to improve the readability of the JSON string when displayed and also visually represent the hierarchical structure of the data. Each nested object or array will be indented by an additional space equal to the specified number. If we do not want to filter out any of the keys from the object, we can just pass undefined.

Using a Filter Array with JSON.stringify

const user = { 
firstName: 'Maria', 
lastName: 'Kimani',
 country: 'Kenya', 
city: 'Nairobi', 
email: 'mariakimanigoretti@gmail.com',
skills: ['HTML', 'CSS', 'JavaScript', 'Kotlin', 'Python'], 
age: 23, 
isLoggedIn: false, 
points: 30 
}
const txt = JSON.stringify(user,['first name, 'lastName', 'country', 'city', 'age'],4) 
console.log(txt)

{ "firstName": "Maria", "lastName": "Goretti", "country": "Kenya", "city": "Nairobi", "age": 23 }

1
Subscribe to my newsletter

Read articles from Mariagoretti Kimani directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Mariagoretti Kimani
Mariagoretti Kimani

A software developer with a knack for UX research, JavaScript, HTML, CSS Kotlin, and Python.Always eager to learn and build user-centric solutions.