Upload File

json(javascript object notation)

41
JSON Tutorial

Upload: raghu-nath

Post on 06-Aug-2015

152 views

Category:

Education


6 download

Report

TRANSCRIPT

Page 1: JSON(JavaScript Object Notation)

JSON Tutorial

Page 2: JSON(JavaScript Object Notation)

JSON: JavaScript Object Notation.

JSON is a syntax for storing and exchanging data.

JSON is an easier-to-use alternative to XML.

Page 3: JSON(JavaScript Object Notation)

JSON Example

{"employees":[ {"firstName":"John", "lastName":"Doe"}, {"firstName":"Anna", "lastName":"Smith"}, {"firstName":"Peter", "lastName":"Jones"}]}

Page 4: JSON(JavaScript Object Notation)

The following XML example also defines an employees object with 3 employee records:

<employees> <employee> <firstName>John</firstName> <lastName>Doe</lastName> </employee> <employee> <firstName>Anna</firstName> <lastName>Smith</lastName> </employee> <employee> <firstName>Peter</firstName> <lastName>Jones</lastName> </employee></employees>

Page 5: JSON(JavaScript Object Notation)

JSON - Evaluates to JavaScript Objects

The JSON format is syntactically identical to the code for creating JavaScript objects.

Because of this similarity, instead of using a parser (like XML does), a JavaScript program can use standard JavaScript functions to convert JSON data into native JavaScript objects.

Page 6: JSON(JavaScript Object Notation)

JSON Example

<!DOCTYPE html><html><body>

<h2>JSON Object Creation in JavaScript</h2>

<p id="demo"></p>

<script>var text = '{"name":"John Johnson","street":"Oslo West 16","phone":"555 1234567"}';

var obj = JSON.parse(text);

document.getElementById("demo").innerHTML =obj.name + "<br>" +obj.street + "<br>" +obj.phone;</script>

</body></html>

Page 7: JSON(JavaScript Object Notation)

JSON Syntax Rules

JSON syntax is derived from JavaScript object notation syntax:

Data is in name/value pairs

Data is separated by commas

Curly braces hold objects

Square brackets hold arrays

Page 8: JSON(JavaScript Object Notation)

JSON Data - A Name and a Value

JSON data is written as name/value pairs.

A name/value pair consists of a field name (in double quotes), followed by a colon, followed by a value:

Page 9: JSON(JavaScript Object Notation)

"firstName":"John"

Page 10: JSON(JavaScript Object Notation)

JSON Objects

JSON objects are written inside curly braces.

Just like JavaScript, JSON objects can contain multiple name/values pairs:

Page 11: JSON(JavaScript Object Notation)

{"firstName":"John", "lastName":"Doe"}

Page 12: JSON(JavaScript Object Notation)

JSON Arrays

JSON arrays are written inside square brackets.

Just like JavaScript, a JSON array can contain multiple objects:

Page 13: JSON(JavaScript Object Notation)

"employees":[ {"firstName":"John", "lastName":"Doe"}, {"firstName":"Anna", "lastName":"Smith"}, {"firstName":"Peter","lastName":"Jones"}]

Page 14: JSON(JavaScript Object Notation)

In the example above, the object "employees" is an array containing three objects. Each object is a record of a person (with a first name and a last name).

Page 15: JSON(JavaScript Object Notation)

JSON Uses JavaScript Syntax

Because JSON syntax is derived from JavaScript object notation, very little extra software is needed to work with JSON within JavaScript.

With JavaScript you can create an array of objects and assign data to it, like this:

Page 16: JSON(JavaScript Object Notation)

var employees = [ {"firstName":"John", "lastName":"Doe"}, {"firstName":"Anna", "lastName":"Smith"}, {"firstName":"Peter","lastName": "Jones"}];

Page 17: JSON(JavaScript Object Notation)

employees[0].firstName + " " + employees[0].lastName;

Page 18: JSON(JavaScript Object Notation)

employees[0]["firstName"] + " " + employees[0]["lastName"];

Page 19: JSON(JavaScript Object Notation)

A common use of JSON is to read data from a web server, and display the data in a web page.

For simplicity, this can be demonstrated by using a string as input (instead of a file).

JSON Example - Object From String

Create a JavaScript string containing JSON syntax:

Page 20: JSON(JavaScript Object Notation)

var text = '{ "employees" : [' +'{ "firstName":"John" , "lastName":"Doe" },' +'{ "firstName":"Anna" , "lastName":"Smith" },' +'{ "firstName":"Peter" , "lastName":"Jones" } ]}';

JSON syntax is a subset of JavaScript syntax.

The JavaScript function JSON.parse(text) can be used to convert a JSON text into a JavaScript object:

Page 21: JSON(JavaScript Object Notation)

var obj = JSON.parse(text);

Page 22: JSON(JavaScript Object Notation)

<p id="demo"></p>

<script>document.getElementById("demo").innerHTML =obj.employees[1].firstName + " " + obj.employees[1].lastName; </script>

Page 23: JSON(JavaScript Object Notation)

Using eval()

Older browsers without the support for the JavaScript function JSON.parse() can use the eval() function to convert a JSON text into a JavaScript object:

var obj = eval ("(" + text + ")");

Page 24: JSON(JavaScript Object Notation)

JSON Http Request

A common use of JSON is to read data from a web server, and display the data in a web page.

This chapter will teach you, in 4 easy steps, how to read JSON data, using XMLHttp.

Page 25: JSON(JavaScript Object Notation)

<div id="id01"></div>

<script>var xmlhttp = new XMLHttpRequest();var url = "myTutorials.txt";

xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var myArr = JSON.parse(xmlhttp.responseText); myFunction(myArr); }}xmlhttp.open("GET", url, true);xmlhttp.send();

function myFunction(arr) { var out = ""; var i; for(i = 0; i < arr.length; i++) { out += '<a href="' + arr[i].url + '">' + arr[i].display + '</a><br>'; } document.getElementById("id01").innerHTML = out;}</script>

Page 26: JSON(JavaScript Object Notation)

Example Explained

1: Create an array of objects.

Use an array literal to declare an array of objects.

Give each object two properties: display and url.

Name the array myArray:

Page 27: JSON(JavaScript Object Notation)

var myArray = [{"display": "JavaScript Tutorial","url": "http://www.w3schools.com/js/default.asp"},{"display": "HTML Tutorial","url": "http://www.w3schools.com/html/default.asp"},{"display": "CSS Tutorial","url": "http://www.w3schools.com/css/default.asp"}]

Page 28: JSON(JavaScript Object Notation)

2: Create a JavaScript function to display the array.

Create a function myFunction() that loops the array objects, and display the content as HTML links:

Page 29: JSON(JavaScript Object Notation)

function myFunction(arr) { var out = ""; var i; for(i = 0; i < arr.length; i++) { out += '<a href="' + arr[i].url + '">' + arr[i].display + '</a><br>'; } document.getElementById("id01").innerHTML = out;}

Page 30: JSON(JavaScript Object Notation)

myFunction(myArray);

Page 31: JSON(JavaScript Object Notation)

3: Create a text file

Put the array literal in a file named myTutorials.txt:

[{"display": "JavaScript Tutorial","url": "http://www.w3schools.com/js/default.asp"},{"display": "HTML Tutorial","url": "http://www.w3schools.com/html/default.asp"},{"display": "CSS Tutorial","url": "http://www.w3schools.com/css/default.asp"}]

Page 32: JSON(JavaScript Object Notation)

4: Read the text file with an XMLHttpRequest

Write an XMLHttpRequest to read the text file, and use myFunction() to display the array:

Page 33: JSON(JavaScript Object Notation)

var xmlhttp = new XMLHttpRequest();var url = "myTutorials.txt";

xmlhttp.onreadystatechange = function() {if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var myArr = JSON.parse(xmlhttp.responseText); myFunction(myArr); }}

xmlhttp.open("GET", url, true);xmlhttp.send();

Page 34: JSON(JavaScript Object Notation)

<div id="id01"></div>

<script>function myFunction(arr) { var out = ""; var i; for(i = 0; i<arr.length; i++) { out += '<a href="' + arr[i].url + '">' + arr[i].display + '</a><br>'; } document.getElementById("id01").innerHTML = out;}</script>

<script src="myTutorials.js"></script>

Page 35: JSON(JavaScript Object Notation)

var myArray = [{"display": "JavaScript Tutorial","url": "http://www.w3schools.com/js/default.asp"},{"display": "HTML Tutorial","url": "http://www.w3schools.com/html/default.asp"},{"display": "CSS Tutorial","url": "http://www.w3schools.com/css/default.asp"}]

Page 36: JSON(JavaScript Object Notation)

function myFunction(arr) { var out = ""; var i; for(i = 0; i < arr.length; i++) { out += '<a href="' + arr[i].url + '">' + arr[i].display + '</a><br>'; } document.getElementById("id01").innerHTML = out;}

Page 37: JSON(JavaScript Object Notation)

myFunction([{"display": "JavaScript Tutorial","url": "http://www.w3schools.com/js/default.asp"},{"display": "HTML Tutorial","url": "http://www.w3schools.com/html/default.asp"},{"display": "CSS Tutorial","url": "http://www.w3schools.com/css/default.asp"}]);

Page 38: JSON(JavaScript Object Notation)

myFunction([{"display": "JavaScript Tutorial","url": "http://www.w3schools.com/js/default.asp"},{"display": "HTML Tutorial","url": "http://www.w3schools.com/html/default.asp"},{"display": "CSS Tutorial","url": "http://www.w3schools.com/css/default.asp""}]);

Page 39: JSON(JavaScript Object Notation)

<!DOCTYPE html><html><body>

<h1>Customers</h1><div id="id01"></div>

<script>var xmlhttp = new XMLHttpRequest();var url = "http://www.w3schools.com/website/customers_mysql.php";

xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { myFunction(xmlhttp.responseText); }}xmlhttp.open("GET", url, true);xmlhttp.send();

function myFunction(response) { var arr = JSON.parse(response); var i; var out = "<table>";

for(i = 0; i < arr.length; i++) { out += "<tr><td>" + arr[i].Name + "</td><td>" + arr[i].City + "</td><td>" + arr[i].Country + "</td></tr>"; } out += "</table>" document.getElementById("id01").innerHTML = out;}</script>

</body></html>

Page 40: JSON(JavaScript Object Notation)

<?phpheader("Access-Control-Allow-Origin: *");header("Content-Type: application/json; charset=UTF-8");

$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");

$result = $conn->query("SELECT CompanyName, City, Country FROM Customers");

$outp = "[";while($rs = $result->fetch_array(MYSQLI_ASSOC)) { if ($outp != "[") {$outp .= ",";} $outp .= '{"Name":"' . $rs["CompanyName"] . '",'; $outp .= '"City":"' . $rs["City"] . '",'; $outp .= '"Country":"'. $rs["Country"] . '"}'; }$outp .="]";

$conn->close();

echo($outp);?>

Page 41: JSON(JavaScript Object Notation)

<!DOCTYPE html><html>

<head><style>h1 { border-bottom: 3px solid #cc9900; color: #996600; font-size: 30px;}table, th , td { border: 1px solid grey; border-collapse: collapse; padding: 5px;}table tr:nth-child(odd) { background-color: #f1f1f1;}table tr:nth-child(even) { background-color: #ffffff;}</style></head>

<body>

<h1>Customers</h1><div id="id01"></div>

<script>var xmlhttp = new XMLHttpRequest();var url = "http://www.w3schools.com/website/customers_mysql.php";

xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { myFunction(xmlhttp.responseText); }}xmlhttp.open("GET", url, true);xmlhttp.send();

function myFunction(response) { var arr = JSON.parse(response); var i; var out = "<table>";

for(i = 0; i < arr.length; i++) { out += "<tr><td>" + arr[i].Name + "</td><td>" + arr[i].City + "</td><td>" + arr[i].Country + "</td></tr>"; } out += "</table>" document.getElementById("id01").innerHTML = out;}</script>

</body></html>


Javascript: JSON and Ajax - O'Reilly Mediaarchive.oreilly.com/oreillyschool/courses/javascript2/Javascript... · Introduction to JSON Welcome to JavaScript 2! In this course, you'll

UNIVERSIDADE FEDERAL DA PARAÍBA · REST - Representational State Transfer HTTP - Hypertext Transfer Protocol JSON - JavaScript Object Notation V & V - Verificação e Validação

ASYNCHRONOUS JAVASCRIPT AND XML - polito.it › files › courses › 01QYAPD › 2016 › slide › ... · 2016-04-21 · JSON •“JSON (JavaScript Object Notation) is a lightweight

[301] JSON - Tyler R. Caraza-HarterStands for JavaScript Object Notation • JavaScript is a language for web development • JSON was developed as a way for JavaScript programs to

Consuming Java Script Object Notation (JSON) feeds

JavaScript Object Notation for ne tCDF IN31B-30: NCO-JSON ...dust.ess.uci.edu/smn/pst_nco_agu_201812.pdf · JavaScript Object Notation (JSON) is a widely used text format for data

LECTURE-4 XML JavaScript Object Notation –JSON …ramana/Fall-2019/lectureNotes/...Ramana Isukapalli WHAT JAVASCRIPTCANNOT DO •Javascript cannot •Read or write files on client

JSON – AJAX - REST JavaScript Object Notation

JavaScript JSON Cookbook - Sample Chapter

An Introduction to JSON JavaScript Object Notation

D3.1 System architecture design and Operational …...HTTP HyperText Transfer Protocol JSON JavaScript Object Notation LDAP Lightweight Directory Access Protocol OGC Open Geospatial

Département Informatique Système interactif de ... · 1.4.3 Json Le format JSON, pour JavaScript Object Notation est un format normalisé de représentation d'objets sous une forme

Electronic Medical Records and Javascript Object Notation ... · Javascript Object Notation A resource in FIRE is modeled by Javascript Object Notation(JSON) JSON is a lightweight

JO - JSON Object Language Reference Manualsedwards/classes/2014/w4115... · JSON or JavaScript Object Notation is an open standard format that uses human-readable text to transmit

Abstract - arXiv · beyond the core Perl installation is a Perl module called JSON. On systems ... JSON (JavaScript Object Notation) is a lightweight text-based open stan- ... A container,

About the Tutorial - JSON 1 - Tutorials · PDF filei About the Tutorial JSON or JavaScript Object Notation is a lightweight text-based open standard designed for human-readable data

CSE 154 - courses.cs.washington.eduJavaScript Object Notation (JSON) JavaScript Object Notation (JSON): Data format that represents data as a set of JavaScript objects • invented

JSON - wcw.cs.ui.ac.id · JSON •JavaScript Object Notation ... •JavaScript is a superset of JSON. A JavaScript compiler is a JSON decoder

JSON, MongoDB, JSONique - Georgia State Universitytinman.cs.gsu.edu/~raj/8711/sp19/json/Lec-JSON-MongoDB...• JSON (JavaScript Object Notation) is a lightweight data exchange format

interoperability.blob.core.windows.netMS-…  · Web viewThe AppSpecificStateData MUST have the following layout: MUST be a JavaScript Object Notation (JSON) [RFC4627] serialization

JSON in XPages - Kwintessential Notes · PDF fileJSON in XPages ... JSON or JavaScript Object Notation, ... json.append( entry.getColumnValues().elementAt(0).toString());

CIM-RS Payload Representation in JSON€¦ · 110 describing a representation of CIM-RS payload elements in JSON (JavaScript Object Notation, see 111 ECMA-262). 112 Specifically,

EMC Captiva REST Services · Captiva REST Services supports only the JSON format for resource representation. JavaScript Object Notation (JSON) is a lightweight data interchange format

Classification of Everyday Living - oasis-open.org Web viewD. Crockford, The application/json Media Type for JavaScript Object Notation (JSON), July 2006. ... The mechanism for confirmation

Introduction to JSON (JavaScript Object Notation)cs5090250/JSON.pdf · 9 JSON Structures • A collection of name/value pairs > In various languages, this is realized as an object,

Basics of JSON (JavaScript Object Notation) with examples

Introduction to JSON (JavaScript Object Notation)cs5090250/JSON.pdf · Introduction to JSON (JavaScript Object Notation) ... Introduction to JSON (JavaScript Object Notation) Sang

[MS-ODATAJSON]: OData Protocol JSON Format … · JavaScript Object Notation (JSON): A text-based, data interchange format that is used to transmit structured data, typically in Asynchronous

JSON-LD. JSON as an XML Alternative JSON is a light-weight alternative to XML for data- interchange JSON = JavaScript Object Notation – It’s really language

Saferpay JSON API Specification - SIX · The Saferpay JSON API (JavaScript Object Notation Application Programming Interface), hereinafter also referred to as the "JA", is a modern

PESC Compliant JSON v1.0specification.sifassociation.org/.../3.3/PESC_JSON.pdf · JSON exchange data shall comply with RFC8259, "The JavaScript Object Notation (JSON) Data Interchange

JSON & MongoDB...JSON (JavaScript Object Notation) •Very lightweight data exchange format •Much less verbose and easier to parse than XML •Increasingly used for data exchange

JQuery, JSON, AJAX · JSON: JavaScript Object Notation • Basic types are – Number integer, real, or floating point – String double-quoted Unicode with backslashes – Boolean

EFFICIENT TRANSFER OF SCIENTIFIC DATA SAMEER GAHERWAR · JSON (JavaScript Object Notation) is a lightweight data-interchange format. “JSON is built using two popular structures:

Foundations of JSON Schemadvrgoc.ing.puc.cl/data/json.pdf · 2016. 6. 16. · 1. INTRODUCTION JSON (JavaScript Object Notation) [5, 19, 9] is a data for-mat based on the data types