codemarch Profile picture
Aug 31, 2022 โ€ข 15 tweets โ€ข 4 min read โ€ข Read on X
What is JSON?

The Complete Guide:

Thread ๐Ÿงต
JSON stands for Javascript Object Notation. JSON is a text-based data format that is used to store and transfer data.

Syntax-
In JSON, the data are inย "key/value" pairs separated by a commaย " , ".

JSON was derived from JavaScript. So, the JSON syntax resembles JavaScript object literal syntax. However, the JSON format can be accessed and created by other programming languages too.
JSON Data -

JSON data consists ofย "key/value"ย pairs similar to JavaScript object properties. The key and values are written in double quotes separated by a colonย " : ".

โžก๏ธExample-
JSON Object -

The JSON object is written inside curly bracesย `{ }`. JSON objects can contain multipleย "key/value"ย pairs.

โžก๏ธExample-
JSON Array -

JSON array is written inside square bracketsย `[ ]`.

โžก๏ธExample-
Accessing JSON Data -

You can access JSON data using the dot notation.

โžก๏ธExample-
JavaScript Objects VS JSON -

Though the syntax of JSON is similar to the JavaScript object, JSON is different from JavaScript objects.
Converting JSON to JavaScript Object -

You can convert JSON data to a JavaScript object using the built-inย `JSON.parse()`ย function.

โžก๏ธExample-
Converting JavaScript Object to JSON -

You can also convert JavaScript objects to JSON format using the JavaScript built-inย `JSON.stringify()`ย function.

โžก๏ธExample-
Use of JSON:

JSON is the most commonly used format for transmitting data (data interchange) from a server to a client and vice-versa.

JSON data are very easy to parse and use. It is fast to access and manipulate JSON data as they only contain text.
JSON is language-independent. You can create and use JSON in other programming languages too.
If you want to learn more about โ€˜ JSON โ€˜ then you can also go through it

๐Ÿ”— developer.mozilla.org/en-US/docs/Leaโ€ฆ
If you enjoyed reading this thread, please do the following:
1. Like the threadโค๏ธ
2. Retweet the first tweet.๐Ÿ”ƒ
3. Follow me and enable notifications: โœ…
@CodeMarch
Thank you for reading all the way through.
Download our free JavaScript Resources ebook Here:

codemarch.gumroad.com/l/udhhj

โ€ข โ€ข โ€ข

Missing some Tweet in this thread? You can try to force a refresh
ใ€€

Keep Current with codemarch

codemarch Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @codemarch

Jul 30, 2024
๐—๐—ฎ๐˜ƒ๐—ฎ๐—ฆ๐—ฐ๐—ฟ๐—ถ๐—ฝ๐˜ ๐—”๐—ฟ๐—ฟ๐—ฎ๐˜†๐˜€(๐—ฃ๐—ฎ๐—ฟ๐˜-๐Ÿฎ) Image
๐—”๐—ฐ๐—ฐ๐—ฒ๐˜€๐˜€๐—ถ๐—ป๐—ด ๐—”๐—ฟ๐—ฟ๐—ฎ๐˜† ๐—˜๐—น๐—ฒ๐—บ๐—ฒ๐—ป๐˜๐˜€.
The index number is used to access an array element:

๐™ฝอŸ๐š˜อŸ๐šอŸ๐šŽอŸ:อŸโ€‚อŸ๐™ฐอŸ๐š›อŸ๐š›อŸ๐šŠอŸ๐šขอŸโ€‚อŸ๐š’อŸ๐š—อŸ๐šอŸ๐šŽอŸ๐šกอŸ๐šŽอŸ๐šœอŸโ€‚อŸ๐šœอŸ๐šอŸ๐šŠอŸ๐š›อŸ๐šอŸโ€‚อŸ๐š อŸ๐š’อŸ๐šอŸ๐š‘อŸโ€‚อŸ๐ŸถอŸ.อŸ

[0] is the first element.
[1] is the second element.
[2] is the third element. Image
๐—–๐—ต๐—ฎ๐—ป๐—ด๐—ถ๐—ป๐—ด ๐—ฎ๐—ป ๐—”๐—ฟ๐—ฟ๐—ฎ๐˜† ๐—˜๐—น๐—ฒ๐—บ๐—ฒ๐—ป๐˜.
we can change the value of the elements in an array.
๐—˜๐˜…๐—ฎ๐—บ๐—ฝ๐—น๐—ฒ: Image
Read 12 tweets
Jul 10, 2024
CSS Colors

Visually explained: Image
Image
Image
Read 17 tweets
Jul 8, 2024
Free HTML/CSS Templates: Image
Image
Image
Read 9 tweets
Jul 7, 2024
Learn HTML & CSS in 50 Days:
Days 1-5: HTML Basics

โž” Introduction to HTML
โ€ข What is HTML?
โ€ข HTML Syntax
โ€ข Elements and Tags

โž” Basic HTML Structure
โ€ข Head, Body, Title
โ€ข Paragraphs, Headings

โž” Project:
โ€ข Simple Personal Bio Page
Days 6-10: HTML Intermediate

โž” Links and Images
โ€ข Internal, External, Anchor Links
โ€ข Adding Images, Alt Text

โž” Lists and Tables
โ€ข Ordered, Unordered, Nested Lists
โ€ข Basic Table Structure

โž” Project:
โ€ข Simple Blog Page
Read 13 tweets
Jan 31, 2024
Learn React in 30 Days.

Complete Structure:
Pre-Requisite:

Javascript Before React - Content Added. Image
Week 1: Introduction and Basics Image
Read 9 tweets
Jan 4, 2024
Components in React.

Explained: Image
Real-Life Example:

Imagine building a house ๐Ÿ .

Each room (kitchen, bedroom, bathroom) represents a component.

React components contain particular UI and behaviour, just as rooms have particular purposes and looks.

Let's explore these "rooms" in the world of React!
๐Ÿ”น Functional Components:

โ€ข Simpler and more concise.
โ€ข Stateless (initially).
โ€ข Use functions to return JSX.
โ€ข With Hooks, they've become even more powerful!

Example: Image
Read 12 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

:(