Complete JSON tutorial: learn JSON quickly

 Complete JSON tutorial: learn JSON quickly



JavaScript Object Notation, or the more commonly known abbreviation JSON, is widely used in various applications. Its purpose is to simplify communication, the most common is communication between the browser and the server. Although there are, the reverse is also true. In your development process, you will inevitably encounter JSON. This article hopes to give you an understanding of how to use it.

A Basic Introduction

When you dive into JSON it is very easy to use, it is just plain text constructed in a certain way. If you've never seen it with your own eyes before, now is a good time to show a small example. This is what it looks like--

{
"SiteName": "CodeWall",
"ArticleName": "JSON Tutorials",
"Revision": 1
}

JSON Data Types:

JavaScript's object notation can handle almost all types of data you might need. This is of course a very powerful tool, and being able to handle arrays and objects on its own is great. Let's review the data types through some small examples and show how they look like in the running application.

String:
{
"StringDataType": "String"
}

Object:
{
"ObjectDataType": {
"myObj": "ObjectData"
}
}

Array
{
"ArrayDataType": [1, 2, 3, 4]
}

Number:
{
"NumberDataType": 1
}

Boolean:
{
"BooleanTrueDataType": true,
"BooleanFalseDataType": false
}
Date:
{
"DateStringDataType": "2011-07-14 19:43:37 +0100",
"JavaScriptDateDataType": new Date(1310669017000)
}


JSON Formatting:

                           Rule 1.  Value & Key/Identifier 
        

Rule 2. Key/Identifier Double Quoted


Rule 3. Wrap Objects In Curly Braces


Rule 4. Separate Key/Value by Colons

Rule 5. Arrays Are To Be Treated Like Arrays


Rule 6. Encapsulate Objects With Square Brackets (Array)


Rule 7. Objects & Data Separated By Commas


Basic Example:

  • String
  • Integer
  • Decimal , Boolean.
{
"Article": "Tutorial",
"Author": "Dan Englishby",
"YearPublished": 2018,
"IsPublished": true,
"AverageWordsPerSentce": 20.3
}


Nesting:


{
"OuterObject": [{
"NestedObjects": [{
"SomeName": "SomeValue"
},
{
"SomeName": "SomeValue"
},
{
"SomeName": "SomeValue"
}
]
}]
}











{
	"OuterObject": [{
		"NestedArray": [
			[
				"SomeValue"
			],
			[
				"SomeValue"
			],
			[
				"SomeValue"
			]
		]
	}]
}
Advance example 1
{
	"Category": "Tutorials",
	"Articles": [{
			"Name": "ChartJS Lesson 1",
			"Shared On": [{
					"SocialNetwork": "Facebook"
				},
				{
					"SocialNetwork": "Twitter"
				},
				{
					"SocialNetwork": "Google+"
				}
			]
		},
		{
			"Name": "ChartJS Lesson 2",
			"Shared On": [{
					"SocialNetwork": "Facebook"
				},
				{
					"SocialNetwork": "Twitter"
				},
				{
					"SocialNetwork": "Google+"
				}
			]

		},
		{
			"Name": "ChartJS Lesson 3",
			"Shared On": [{
					"SocialNetwork": "Facebook"
				},
				{
					"SocialNetwork": "Twitter"
				},
				{
					"SocialNetwork": "Google+"
				}
			]
		},
		{
			"Name": "ChartJS Lesson 4",
			"Shared On": [{
					"SocialNetwork": "Facebook"
				},
				{
					"SocialNetwork": "Twitter"
				},
				{
					"SocialNetwork": "Google+"
				}
			]
		}
	]
}

Advance Example 2


{
	"Category": "Tutorials",
	"Articles": [{
			"Name": "ChartJS Lesson 1",
			"Shared On": [
				["Facebook"],
				["Twitter"],
				["Google+"]
			]
		}
	]
}
Storing  as a variable 
var json = {
	"Article": "Tutorial",
	"Author": "Dan Englishby",
	"YearPublished": 2018,
	"IsPublished": true,
	"AverageWordsPerSentce": 20.3
};














































































Comments

Post a Comment

Popular posts from this blog

Map ad Set in JavaScript

Image
  Map and Set We've learned about the following complicated data structures up to this point: Keyed collections are stored in objects. For storing ordered collections, arrays are employed. But in real life, that isn't enough. Map Like an Object, a Map is a collection of keyed data objects. The primary distinction is that Map accepts any type of key. The following are examples of methods and properties: new Map() is a function that generates a map. The value is stored by the key in map.set(key, value). map. get(key) – returns the value associated with the key, or null if the key does not exist on the map. If the key exists, map.has(key) returns true; otherwise, it returns false. map.delete(key) – deletes the value associated with the key. map.clear() - clears the map of all items. The current element count is returned by map.size. One of the most noticeable and essential Map features is the use of objects as keys. The same cannot be said for Object . It's acceptable to...
Read more

The Complete Guide to Reacting for Beginners in 2021

  The Complete Guide to Reacting for Beginners in 2021 Welcome to the React Beginner's Guide. It aims to teach you all the React basics you need to know to start building React applications in 2021.   I created this resource to provide you with the most comprehensive and beginner-friendly way to learn React from scratch.   Finally, you will have an in-depth understanding of a large number of basic React concepts, including:   The reason, content, and method of React   How to easily create a React application   JSX and basic syntax   JSX elements   Components and attachments   Events in React   states and State Management   Basics of React Hooks    React Basics What exactly is    React?   React is officially defined as "a JavaScript library for creating user interfaces", but what does this mean?   React is a library written in JavaScript. We wri...
Read more