This content originally appeared on DEV Community and was authored by Akshat Sharma
Hey reader👋 Hope you are doing well😊
In the last post we have talked about interfaces of DOM. In this post we are going to discuss about JSON.
So let's get started🔥
What is JavaScript JSON?
JSON stands for Java*Script **Object **N*otation. It is a lightweight data interchange format that is easy for humans to read and write and easy for machines to parse and generate. In simple words we can say that it is a text format for storing and transporting data.
Example -:
Here we have an object with three properties.
JSON is used to send data between computers.
JSON is built on two structures:
- A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array.
- An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.
Why JSON?
We know that whenever we declare a variable and assign a value to it, it’s not the variable that holds the value but rather the variable just holds an address in the memory where the initialized value is stored.
Suppose we have var age=22 so here age holds the memory location where 22 is stored. Now suppose you have to transfer data now what you will do is you will give your computer memory in order to transfer data because your data is stored in memory and you don't have any other way apart from it. But giving away complete memory is risky and problematic. So how can we transfer the data🤔.
This problem is resolved by JSON. JSON serializes the data and converts it into a human-readable and understandable format, which also makes it transferal and to be able to communicate.
In summary, JSON solves the data transfer problem by converting data into a standardized, text-based format that is easily transferable between systems and across different platforms. This ensures that data can be accurately and efficiently communicated without relying on machine-specific memory representations.
Advantages of JSON
Human-Readable: JSON is easy for humans to read and write.
Interoperable: JSON is language-independent but uses conventions that are familiar to programmers of the C family of languages (including C, C++, C#, Java, JavaScript, Perl, Python, and many others).
Lightweight: JSON is less verbose than XML, making it a more efficient format for data interchange.
Easy to Parse: JSON can be easily parsed by machines, and most programming languages provide libraries or functions to parse and generate JSON.
JSON Syntax Rules
JSON syntax is derived from JavaScript object notation syntax:
Data is in name/value pairs. Example -:
"name:"Akshat"Data is separated by commas. Example -:
"name:"Akshat", "age":22Curly braces hold objects. Example -:
let details={"name:"Akshat", "age":22}Square brackets hold arrays. Example -:
let details={"name:"Akshat", "age":22,"ids":[12345,6678]}
JSON Objects
A JSON object is a collection of key/value pairs. The keys are strings, and the values can be strings, numbers, objects, arrays, true, false, or null.
JSON Arrays
A JSON array is an ordered collection of values. The values can be strings, numbers, objects, arrays, true, false, or null.
Here we have an object that holds an arrayAvengersin which each value is detail object of an avenger.
To access name of first avenger-:
Avengers[0].Name
The file type for JSON files is ".json".
Convert a JSON Text to a JavaScript Object
We will be using the JSON.parse() method to convert the JSON text to a JavaScript Object.
When using the JSON.parse() on a JSON derived from an array, the method will return a JavaScript array, instead of a JavaScript object.
Date objects are not allowed in JSON.If you need to include a date, write it as a string.
Functions are not allowed in JSON.If you need to include a function, write it as a string.
JSON.stringify()
Convert a JavaScript object into a string with JSON.stringify().
Storing Data
JSON makes it possible to store JavaScript objects as text.
The localStorage.setItem() method is used to store this JSON string in the browser's local storage with the key "testJSON". This allows the data to persist across browser sessions.
To retrieve the stored data, the localStorage.getItem() method is called with the key "testJSON", returning the JSON string previously stored. This string is then parsed back into a JavaScript object using the JSON.parse() method, and the resulting object is assigned to the variable obj.
So this is it for this blog I hope you have understood it well. Please feel free to add if I have missed something.
Don't forget to follow me.
Thankyou🩵
This content originally appeared on DEV Community and was authored by Akshat Sharma
Akshat Sharma | Sciencx (2024-07-11T04:39:36+00:00) Day 29 of 30 of JavaScript. Retrieved from https://www.scien.cx/2024/07/11/day-29-of-30-of-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.