Posted inTechnology / JavaScript / jQuery

JavaScript Top 5 Most useful JSON Example

JavaScript Top 5 Most useful JSON Example

Today, We want to share with you JavaScript Top 5 Most useful JSON Example.
In this post we will show you JSON Most useful Top 5 Example using JavaScript, hear for JavaScript Object Notation (JSON) we will give you demo and example for implement.
In this post, we will learn about An Introduction to JavaScript Object Notation (JSON) in JavaScript with an example.

JSON is a one type of format for storing(light weight data) and transporting data.
it’s used when data is sent from a (Serever side to client side) server to a web page(all data sent).

JSON Simple full form of [JavaScript-Object-Notation].

Example 1 :

How to get the key value in JSON object?

[html]
var JsonDataObject= { “progname1″:”Laravel”, “progname2″:”PHP”, “progname3″:”JSON”, “progname4″:”jQuery”, “progname5″:”Magento” };

//all read key using for loop
for (var key in JsonDataObject)
{
console.log(key);
console.log(JsonDataObject[key]);
}

Output – Console.log:

progname1
Laravel
progname2
PHP
progname3
JSON
progname4
jQuery
progname5
Magento

[/html]

Example 2 : JavaScript JSON

how to get json key and value in javascript?

[html]

//used to jquery json parser

var JsonDataObject = $.parseJSON(‘{ “progname1″:”Laravel”, “progname2″:”PHP”, “progname3″:”JSON”, “progname4″:”jQuery”, “progname5″:”Magento” }’);
alert(JsonDataObject[‘progname1’]);

//used to json parser
var JsonDataObject = JSON.parse(‘{ “progname1″:”Laravel”, “progname2″:”PHP”, “progname3″:”JSON”, “progname4″:”jQuery”, “progname5″:”Magento” }’);
alert(JsonDataObject[‘progname1’]);

[/html]

Example 3 : simple json example

Get json value from response

[html]

var response_data = JSON.parse(‘{“ui_id”:”98256cd-d692-k965-85978-0625457DFr”}’);
response_data.ui_id ; //# => 98256cd-d692-k965-85978-0625457DFr

[/html]

Example 4 : json examples

Example : Adding/removing items from JSON data with JQuery

Simple JSON Data records

[html]
var data = {products: [
{product_id: “1”, product_name: “Snatch”, product_cat: “crime”},
{product_id: “2”, product_name: “pakainfo of Eastwick”, product_cat: “comedy”},
{product_id: “3”, product_name: “computer”, product_cat: “action”},
{product_id: “4”, product_name: “Ordinary People”, product_cat: “drama”},
{product_id: “5”, product_name: “Billy Elliot”, product_cat: “lp”},
{product_id: “6”, product_name: “Toy Story”, product_cat: “Mobile”}
]};

[/html]

New Adding an record from JSON:

[html]

data.products.push(
{product_id: “7”, product_name: “Douglas Adams”, product_cat: “comedy”}
);

[/html]

Form Removing an record from JSON:

[html]

data.products.splice(1, 3);
// Removes 3 products starting with the 2nd,
// (“pakainfo of Eastwick”, “computer”, “Ordinary People”)

New Adding in the middle record from JSON:

data.products.splice(2, 0,
{product_id: “7”, product_name: “Douglas Adams”, product_cat: “comedy”}
);

[/html]

Example of JSON-Data

Example 5 :1 – JSON Example

[html]

{
“friends”:[
{“postname”:”er”, “salary”:”25000″},
{“postname”:”dr”, “salary”:”30000″},
{“postname”:”tr”, “salary”:”58222″}
]
}

[/html]

2 – JSON Objects Example

[html]

{“postname”:”er”, “salary”:”Doe”}

[/html]

3 – JSON Arrays Example

[html]

“friends”:[
{“postname”:”er”, “salary”:”98522″},
{“postname”:”dr”, “salary”:”10000″},
{“postname”:”tr”, “salary”:”24550″}
]

[/html]

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.

Leave a Reply

Your email address will not be published. Required fields are marked *

We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype