Tutorial: W3Schools Home Next Chapter

JSON Tutorial
HOME HTML CSS JAVASCRIPT SQL PHP JQUERY XML ASP.NET MORE... REFERENCES | EXAMPLES | FORUM | ABOUT
Search w3schools.com:
JSON Tutorial
JSON HOME
JSON Intro
JSON Syntax
JSON HowTo WEB HOSTING
JSON Tutorial
Best Web Hosting
UK Reseller Hosting
VPS Hosting
W3Schools Home Next Chapter
WEB BUILDING
JSON: JavaScript Object Notation. XML Editor - Free Trial!
FREE Website BUILDER
JSON is syntax for storing and exchanging text information. Much like XML. FREE Website Creator
JSON is smaller than XML, and faster and easier to parse.

W3SCHOOLS EXAMS
HTML5, CSS, JavaScript,
PHP, jQuery, XML, and
ASP Certifications
JSON Example
SHARE THIS PAGE

{

"employees": [

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

{ "firstName":"Anna" , "lastName":"Smith" }, Like 104k

{ "firstName":"Peter" , "lastName":"Jones" }

]

}
The employees object is an array of 3 employee records (objects).
What is JSON?
JSON stands for JavaScript Object Notation
JSON is lightweight text-data interchange format
JSON is language independent *
JSON is "self-describing" and easy to understand
* JSON uses JavaScript syntax for describing data objects, but JSON is still language and platform independent. JSON
parsers and JSON libraries exists for many different programming languages.
JSON - Evaluates to JavaScript Objects

The JSON text format is syntactically identical to the code for creating JavaScript objects.
Because of this similarity, instead of using a parser, a JavaScript program can use the built-in eval() function and execute
JSON data to produce native JavaScript objects.
http://www.w3schools.com/json/default.asp[3/18/2014 5:06:58 PM]

JSON Tutorial
W3Schools Home Next Chapter

Award-winning XML Tools: Altova MissionKit
The Altova MissionKit is an integrated suite of tools ideal for:
XML development
Web & Web services development
Data mapping & integration
Rendering & publishing XML & database data
XBRL validation, taxonomy editing, transformation & rendering WEB RESOURCES
Chart & report generation for XML & XBRL Web Statistics

Altova MissionKit includes XMLSpy - the industry leading XML editor, Web Validation
MapForce - a graphical, any-to-any data mapping tool, StyleVision - a visual
XSLT and report designer, and much more. Youll get 7 tools for less than the
price of 2!
Try it now!
Try Altova MissionKit free for 30 days!

Download a fully-functional free trial
Top 10 Tutorials Top 10 References Top 10 Examples Web Certificates Color Picker
HTML Tutorial HTML/HTML5 Reference HTML Examples HTML Certificate
HTML5 Tutorial CSS 1,2,3 Reference CSS Examples HTML5 Certificate
CSS Tutorial CSS 3 Browser Support JavaScript Examples CSS Certificate
CSS3 Tutorial JavaScript HTML DOM Examples JavaScript Certificate
JavaScript Tutorial HTML DOM PHP Examples jQuery Certificate
jQuery Tutorial XML DOM jQuery Examples XML Certificate

SQL Tutorial PHP Reference XML Examples ASP Certificate
PHP Tutorial jQuery Reference XML DOM Examples PHP Certificate
ASP.NET Tutorial ASP.NET Reference ASP Examples
XML Tutorial HTML Colors SVG Examples

JSON Tutorial
REPORT ERROR |
HOME |
TOP |
PRINT |
FORUM |
ABOUT |
ADVERTISE WITH US

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding.
Tutorials, references, and examples are
constantly reviewed to avoid errors, but we cannot warrant full correctness of all content.
While using this site, you agree to have read and accepted our terms of use, cookie
and privacy policy.
Copyright 1999-2014 by Refsnes Data. All Rights Reserved.

JSON Introduction
JSON Tutorial
JSON HOME Online HTML Editing Tools
JSON Intro ephox.com/View_Demo
JSON Syntax Create & Publish Quality Content w/ the Help of Our HTML Editing Tool!
JSON - Introduction
Best Web Hosting
UK Reseller Hosting
VPS Hosting
Previous Next Chapter
WEB BUILDING
Try it Yourself Download XML Editor
With our editor, you can edit JavaScript code online and click on a button to view the result:
FREE Website Creator
JSON Example
W3SCHOOLS EXAMS

<!DOCTYPE html> HTML5, CSS, JavaScript,
<html> PHP, jQuery, XML, and

<body> ASP Certifications

<h2>JSON Object Creation in JavaScript</h2>
<p> SHARE THIS PAGE

Name: <span id="jname"></span><br />

Age: <span id="jage"></span><br />

Address: <span id="jstreet"></span><br /> Like 104k

Phone: <span id="jphone"></span><br />

</p>
<script>

var JSONObject= {

"name":"John Johnson",

"street":"Oslo West 555",

"age":33,

"phone":"555 1234567"};

document.getElementById("jname").innerHTML=JSONObject.name;

document.getElementById("jage").innerHTML=JSONObject.age;

document.getElementById("jstreet").innerHTML=JSONObject.street;

document.getElementById("jphone").innerHTML=JSONObject.phone;

</script>

</body>

</html>
Try it yourself

Click on the "Try it yourself" button to see how it works
http://www.w3schools.com/json/json_intro.asp[3/18/2014 5:07:36 PM]

JSON Introduction
Much Like XML

JSON is plain text
JSON is "self-describing" (human readable)
JSON is hierarchical (values within values)
JSON can be parsed by JavaScript
JSON data can be transported using AJAX
Much Unlike XML

No end tag
Shorter
Quicker to read and write
WEB RESOURCES
Can be parsed using built-in JavaScript eval()
Web Statistics
Uses arrays
No reserved words Web Validation
Why JSON?
For AJAX applications, JSON is faster and easier than XML:
Using XML
Fetch an XML document

Use the XML DOM to loop through the document
Extract values and store in variables
Using JSON
Fetch a JSON string

eval() the JSON string

Build Your Powerful HTML Website for Free with Wix

Start building your own stunning website - programming free!
Wix.com provides a free, easy-to-use online platform that lets you create and
publish your own unique website. Its powerful editing tools & customizable
website designs make building a beautiful website easy.
Add eCommerce features, connect a custom domain and experience superior SEO
results. Wix is your ultimate solution for creating an exquisite HTML website.
Over 20 million users have created their website with Wix.
Create yours now!

JSON Introduction

REPORT ERROR |
HOME |
TOP |
PRINT |
FORUM |
ABOUT |
ADVERTISE WITH US

and privacy policy.

JSON Syntax
JSON Tutorial
JSON HOME
JSON Intro
JSON Syntax
JSON Syntax
Best Web Hosting
UK Reseller Hosting
VPS Hosting
WEB BUILDING
JSON syntax is a subset of JavaScript syntax
XML Editor - Free Trial!
JSON Syntax Rules FREE Website Creator
JSON syntax is a subset of the JavaScript object notation syntax:

W3SCHOOLS EXAMS
Data is in name/value pairs HTML5, CSS, JavaScript,
Data is separated by commas PHP, jQuery, XML, and
Curly braces hold objects ASP Certifications
Square brackets hold arrays
SHARE THIS PAGE

JSON Name/Value Pairs
JSON data is written as name/value pairs. Like 104k
A name/value pair consists of a field name (in double quotes), followed by a colon, followed by a value:

"firstName" : "John"
This is simple to understand, and equals to the JavaScript statement:

firstName = "John"
JSON Values
JSON values can be:
A number (integer or floating point)

A string (in double quotes)
A Boolean (true or false)
An array (in square brackets)
An object (in curly brackets)
null
JSON Objects
http://www.w3schools.com/json/json_syntax.asp[3/18/2014 5:07:48 PM]

JSON Syntax
JSON objects are written inside curly brackets,
Objects can contain multiple name/values pairs:

{ "firstName":"John" , "lastName":"Doe" }
This is also simple to understand, and equals to the JavaScript statements:

firstName = "John";

lastName = "Doe";
JSON Arrays
JSON arrays are written inside square brackets. WEB RESOURCES
Web Statistics
An array can contain multiple objects:
Web Validation

{

"employees": [


{ "firstName":"Anna" , "lastName":"Smith" },

{ "firstName":"Peter" , "lastName":"Jones" }

]

}
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).
JSON Uses JavaScript Syntax

Because JSON uses JavaScript syntax, no 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:
Example

var employees =
[


{ "firstName":"Anna" , "lastName":"Smith" },

{ "firstName":"Peter" , "lastName": "Jones" }

];
The first entry in the JavaScript object array can be accessed like this:

employees[0].firstName + " " +
employees[0].lastName;
The returned content will be:

John
Doe
The data can be modified like this:

employees[0].firstName = "Gilbert";
Try it yourself

JSON Syntax
In the next chapter you will learn how to convert a JSON text to a JavaScript object.
JSON Files
The file type for JSON files is ".json"
The MIME type for JSON text is "application/json"

REPORT ERROR |
HOME |
TOP |
PRINT |
FORUM |
ABOUT |
ADVERTISE WITH US

and privacy policy.

JSON Howto
JSON Tutorial
JSON HOME
JSON Intro
JSON Syntax
JSON HowTo
Best Web Hosting
UK Reseller Hosting
VPS Hosting
WEB BUILDING
Converting a JSON Text to a JavaScript Object Download XML Editor
One of the most common use of JSON is to fetch JSON data from a web server (as a file or as an HttpRequest), convert the
FREE Website Creator
JSON data to a JavaScript object, and then it uses the data in a web page.
For simplicity, this can be demonstrated by using a string as input (instead of a file).
W3SCHOOLS EXAMS
HTML5, CSS, JavaScript,
JSON Example - Object From String PHP, jQuery, XML, and
ASP Certifications
Create a JavaScript string containing JSON syntax:

SHARE THIS PAGE

var txt = '{ "employees" : [' +

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

'{ "firstName":"Anna" , "lastName":"Smith" },' +

'{ "firstName":"Peter" , "lastName":"Jones" } ]}'; Like 104k
Since JSON syntax is a subset of JavaScript syntax, the JavaScript function eval() can be used to convert a JSON text into a
JavaScript object.
The eval() function uses the JavaScript compiler which will parse the JSON text and produce a JavaScript object. The text
must be wrapped in parenthesis to avoid a syntax error:

var obj = eval ("(" + txt + ")");
Use the JavaScript object in your page:
Example

<p>

First Name: <span id="fname"></span><br />

Last Name: <span id="lname"></span><br />

</p>

<script>

document.getElementById("fname").innerHTML = obj.employees[1].firstName;

document.getElementById("lname").innerHTML = obj.employees[1].lastName;

</script>
Try it yourself
http://www.w3schools.com/json/json_eval.asp[3/18/2014 5:08:01 PM]

JSON Howto
JSON Parser
The eval() function can compile and execute any JavaScript. This represents a potential security problem.
It is safer to use a JSON parser to convert a JSON text to a JavaScript object. A JSON parser will recognize only JSON text
and will not compile scripts.
In browsers that provide native JSON support, JSON parsers are also faster.
Native JSON support is included in all major browsers and in the latest ECMAScript (JavaScript) standard.
Web Browsers Support Web Software Support WEB RESOURCES

Web Statistics
Firefox 3.5 jQuery Web Validation
Internet Explorer 8 Yahoo UI
Chrome Prototype
Opera 10 Dojo
Safari 4 ECMAScript 1.5
Try it yourself
For older browsers, a JavaScript library is available at https://github.com/douglascrockford/JSON-js
The JSON format was

originally specified by Douglas Crockford

Altova MapForce Graphical XML Conversion Tool
from the Developers of XMLSpy
Need an easy way to get data into XML, or transform XML to another format?
MapForce lets you map XML data to/from
any combination of XML, database, flat file,
Excel, XBRL, or Web services data. Then it transforms data instantly or

auto-generates royalty-free code for recurrent conversions.
New features in Version 2014!
Easy-to-use, graphical data mapping interface

Instant data transformation
XSLT 1.0/2.0 and XQuery code generation
Java, C#, and C++ code generation
Advanced data processing functions
Support for all major relational databases including SQL Server, IBM DB2,
Oracle, and more
Integration with Altova StyleVision for report rendering
Visual Studio & Eclipse integration
Available in 32-bit and 64-bit versions

Try it now!

Download a fully-functional trial today!

JSON Howto

REPORT ERROR |
HOME |
TOP |
PRINT |
FORUM |
ABOUT |
ADVERTISE WITH US

and privacy policy.

Tutorial: W3Schools Home Next Chapter

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Tutorial: W3Schools Home Next Chapter

Caricato da

Copyright:

Formati disponibili

JSON Tutorial

JSON is smaller than XML, and faster and easier to parse.

The employees object is an array of 3 employee records (objects).

JSON - Evaluates to JavaScript Objects

http://www.w3schools.com/json/default.asp[3/18/2014 5:06:58 PM]

W3Schools Home Next Chapter

The Altova MissionKit is an integrated suite of tools ideal for:

jQuery Tutorial XML DOM jQuery Examples XML Certificate

http://www.w3schools.com/json/default.asp[3/18/2014 5:06:58 PM]

http://www.w3schools.com/json/default.asp[3/18/2014 5:06:58 PM]

<p> SHARE THIS PAGE

http://www.w3schools.com/json/json_intro.asp[3/18/2014 5:07:36 PM]

Much Like XML

Much Unlike XML

Fetch an XML document

Fetch a JSON string

Previous Next Chapter

Start building your own stunning website - programming free!

Over 20 million users have created their website with Wix.

Create yours now!

http://www.w3schools.com/json/json_intro.asp[3/18/2014 5:07:36 PM]

jQuery Tutorial XML DOM jQuery Examples XML Certificate

http://www.w3schools.com/json/json_intro.asp[3/18/2014 5:07:36 PM]

JSON syntax is a subset of the JavaScript object notation syntax:

SHARE THIS PAGE

This is simple to understand, and equals to the JavaScript statement:

A number (integer or floating point)

http://www.w3schools.com/json/json_syntax.asp[3/18/2014 5:07:48 PM]

Objects can contain multiple name/values pairs:

This is also simple to understand, and equals to the JavaScript statements:

JSON Uses JavaScript Syntax

The returned content will be:

The data can be modified like this:

http://www.w3schools.com/json/json_syntax.asp[3/18/2014 5:07:48 PM]

Previous Next Chapter

jQuery Tutorial XML DOM jQuery Examples XML Certificate

http://www.w3schools.com/json/json_syntax.asp[3/18/2014 5:07:48 PM]

Create a JavaScript string containing JSON syntax:

Use the JavaScript object in your page:

http://www.w3schools.com/json/json_eval.asp[3/18/2014 5:08:01 PM]

Web Browsers Support Web Software Support WEB RESOURCES

For older browsers, a JavaScript library is available at https://github.com/douglascrockford/JSON-js

The JSON format was

Previous Next Chapter

Easy-to-use, graphical data mapping interface

http://www.w3schools.com/json/json_eval.asp[3/18/2014 5:08:01 PM]

jQuery Tutorial XML DOM jQuery Examples XML Certificate

http://www.w3schools.com/json/json_eval.asp[3/18/2014 5:08:01 PM]

Potrebbero piacerti anche