Web Development

JavaScript JSON

JavaScript JSON is section 11 of Beginner’s Guide to JavaScript.

You now know how to create an array and how to create an object with JavaScript. To move forward you need to learn about both of those concepts.

JSON is a format for storing and transporting data. JSON is often used when data is sent from a server to a web page. This kind be as in the array format or in the object format.

JSON stands for JavaScript Object Notation. It is a lightweight data interchange format. JSON is language independent.  JSON uses JavaScript syntax, but the JSON format is text only. Text can be read and used as a data format by any programming language. Special thing about JSON is, it is  “self-describing” and easy to understand.

This JSON syntax defines an JSON object and array to store movies.

{“movies”:[
{“name”:“Tangled”, “animations”:“Disney”},
{“name”:“Toy Story”, “animations”:“Pixar”},
{“name”:“Kung Fu Panda”, “animations”:“Dreamworks”}
]}

JSON Object

The JSON format is syntactically identical to the code for creating JavaScript objects. Because of this similarity, a JavaScript program can easily convert JSON data into native JavaScript objects.

JSON Syntax Rules

  • Data is in name/value pairs
  • Data is separated by commas
  • Curly braces hold objects
  • Square brackets hold arrays

JSON data is written as name/value pairs, Just like JavaScript object properties. A name/value pair consists of a field name (in double quotes), followed by a colon, followed by a value. JSON objects are written inside curly braces. Just like in JavaScript, objects can contain multiple name/values pairs.

{“name”:“Tangled”, “animations”:“Disney”}

JSON Arrays

JSON arrays are written inside square brackets. Just like in JavaScript, an array can contain objects like the above example. In the example above, the object “movies” is an array. It contains three objects. Each object is a record of a movie with a name and animation house.

Converting a JSON Text to a JavaScript Object

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 using a string as input. First, create a JavaScript string containing JSON syntax.

var text = ‘{ “movies” : [‘ +
‘{ “name”:”Tangled” , “animations”:”Disney” },’ +
‘{ “name”:”Toy Story” , “animations”:”Pixar” },’ +
‘{ “name”:”Kung Fu Panda” , “animations”:”Dreamworks” } ]}’;

Then, use the JavaScript built-in function JSON.parse() to convert the string into a JavaScript object.

var obj = JSON.parse(text);

To retrieve the values you can use the index of the JSON array list and the property of an item.

obj.movies[1].name

 


What’s Next?

Learn what includes in JavaScript Reserved Words

 

 

 

About the author

Sandeep Likhar

Sandeep Likhar from India, Blogger, eBook Designer and Founder of LetsDnD. Having 6 years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

Leave a Comment