JavaScript tutorials for Beginners – JavaScript and JSON

Hits: 13

 

(JavaScript Tutorials for Beginners)

In this end-to-end example, you will learn – JavaScript tutorials for Beginners – JavaScript and JSON.

 

JavaScript and JSON

In this tutorial, you will learn about JSON and how JavaScript is used with JSON with the help of examples.

JSON stands for Javascript Object Notation. JSON is a text-based data format that is used to store and transfer data. For example,

// JSON syntax
{
    "name": "John",
    "age": 22,
    "gender": "male",

}

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 be created by other programming languages too.

Note: JavaScript Objects and JSON are not the same. You will learn about their differences later in this tutorial.


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 :. For example,

// JSON data
"name": "John"

Note: JSON data requires double quotes for the key.


JSON Object

The JSON object is written inside curly braces { }. JSON objects can contain multiple key/value pairs. For example,

// JSON object
{ "name": "John", "age": 22 }

JSON Array

JSON array is written inside square brackets [ ]. For example,

// JSON array
[ "apple", "mango", "banana"]

// JSON array containing objects
[
    { "name": "John", "age": 22 },
    { "name": "Peter", "age": 20 }.
    { "name": "Mark", "age": 23 }
]

Note: JSON data can contain objects and arrays. However, unlike JavaScript objects, JSON data can not contain functions as values.


Accessing JSON Data

You can access the JSON data using the dot notation. For example,

// JSON object
let data = {
    "name": "John",
    "age": 22,
    "hobby": {
	"reading" : true,
	"gaming" : false,
	"sport" : "football"
    },
    "class" : ["JavaScript", "HTML", "CSS"]
}

// accessing JSON object
console.log(data.name); // John
console.log(data.hobby); // { gaming: false, reading: true, sport: "football"}

console.log(data.hobby.sport); // football
console.log(data.class[1]); // HTML

We use the . notation to access JSON data. Its syntax is: variableName.key

You can also use square bracket syntax [] to access JSON data. For example,

// JSON object
let data = {
    "name": "John",
    "age": 22
}

// accessing JSON object
console.log(data["name"]); // John

JavaScript Objects VS JSON

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

JSON JavaScript Object
The key in key/value pair should be in double quotes. The key in key/value pair can be without double quotes.
JSON cannot contain functions. JavaScript objects can contain functions.
JSON can be created and used by other programming languages. JavaScript objects can only be used in JavaScript.

Converting JSON to JavaScript Object

You can convert JSON data to a JavaScript object using the built-in JSON.parse() function. For example,

// json object
let jsonData = '{ "name": "John", "age": 22 }';

// converting to JavaScript object
let obj = JSON.parse(jsonData);

// accessing the data
console.log(obj.name); // John

Converting JavaScript Object to JSON

You can also convert JavaScript objects to JSON format using the JavaScript built-in JSON.stringify() function. For example,

// JavaScript object
let jsonData = { "name": "John", "age": 22 };

// converting to JSON
let obj = JSON.stringify(jsonData);

// accessing the data
console.log(obj); // "{"name":"John","age":22}"

Use of JSON

JSON is the most commonly used format for transmitting data (data interchange) from a server to a client and vice-versa. The JSON data are very easy to parse and use. It is fast to access and manipulate JSON data as they only contain texts.

JSON is language independent. You can create and use JSON in other programming languages too.

 

 

Personal Career & Learning Guide for Data Analyst, Data Engineer and Data Scientist

Applied Machine Learning & Data Science Projects and Coding Recipes for Beginners

A list of FREE programming examples together with eTutorials & eBooks @ SETScholars

95% Discount on “Projects & Recipes, tutorials, ebooks”

Projects and Coding Recipes, eTutorials and eBooks: The best All-in-One resources for Data Analyst, Data Scientist, Machine Learning Engineer and Software Developer

Topics included: Classification, Clustering, Regression, Forecasting, Algorithms, Data Structures, Data Analytics & Data Science, Deep Learning, Machine Learning, Programming Languages and Software Tools & Packages.
(Discount is valid for limited time only)

Disclaimer: The information and code presented within this recipe/tutorial is only for educational and coaching purposes for beginners and developers. Anyone can practice and apply the recipe/tutorial presented here, but the reader is taking full responsibility for his/her actions. The author (content curator) of this recipe (code / program) has made every effort to ensure the accuracy of the information was correct at time of publication. The author (content curator) does not assume and hereby disclaims any liability to any party for any loss, damage, or disruption caused by errors or omissions, whether such errors or omissions result from accident, negligence, or any other cause. The information presented here could also be found in public knowledge domains.

Learn by Coding: v-Tutorials on Applied Machine Learning and Data Science for Beginners

Please do not waste your valuable time by watching videos, rather use end-to-end (Python and R) recipes from Professional Data Scientists to practice coding, and land the most demandable jobs in the fields of Predictive analytics & AI (Machine Learning and Data Science).

The objective is to guide the developers & analysts to “Learn how to Code” for Applied AI using end-to-end coding solutions, and unlock the world of opportunities!