How to Read and Parse JSON Data in JavaScript

javascript jsonjson parsingjson stringifyjson objectdata conversion

Published·Aug 20, 2009Modified·Updating soon

JSON (JavaScript Object Notation) is a lightweight data-interchange format that uses a language-independent text format, making it an ideal choice for data exchange. Since JSON is a native JavaScript format, processing JSON data in JavaScript requires no special APIs or toolkits.

This article summarizes the methods for manipulating JSON in JavaScript.

In JSON, there are two structures: objects and arrays.

An object starts with { (left brace) and ends with } (right brace). Each "name" is followed by a : (colon), and "name/value" pairs are separated by , (comma). Names must be enclosed in quotes; values that are strings must be quoted, while numeric values do not require quotes. For example:

var o = {"xlid": "cxh", "xldigitid": 123456, "topscore": 2000, "topplaytime": "2009-08-20"};

An array is an ordered collection of values. It starts with [ (left bracket) and ends with ] (right bracket), with values separated by , (comma).

For example:

var jsonranklist = [{"xlid": "cxh", "xldigitid": 123456, "topscore": 2000, "topplaytime": "2009-08-20"}, {"xlid": "zd", "xldigitid": 123456, "topscore": 1500, "topplaytime": "2009-11-20"}];

To handle JSON data conveniently, the json.js package is available for download at: http://www.json.org/json.js

In the data transmission process, JSON is passed as text (a string), while JavaScript operates on JSON objects. Therefore, converting between JSON objects and JSON strings is crucial. For example:

JSON String:

var str1 = '{ "name": "cxh", "sex": "man" }';

JSON Object:

var str2 = { "name": "cxh", "sex": "man" };

1. Converting JSON Strings to JSON Objects

To use str1, it must first be converted into a JSON object:

// Convert JSON string to JSON object
var obj = eval('(' + str + ')');

Or:

var obj = str.parseJSON(); // Convert JSON string to JSON object

Or:

var obj = JSON.parse(str); // Convert JSON string to JSON object

After conversion, you can access the data like this:

alert(obj.name);
alert(obj.sex);

Important Note: If obj is already a JSON object, using the eval() function (even multiple times) will still result in a JSON object. However, using the parseJSON() function on an existing object may cause errors (throwing a syntax exception).

2. Converting JSON Objects to JSON Strings

You can use toJSONString() or the global method JSON.stringify() to convert a JSON object into a JSON string.

For example:

var last = obj.toJSONString(); // Convert JSON object to JSON string

Or:

var last = JSON.stringify(obj); // Convert JSON object to JSON string

alert(last);

Handling Arrays

var str = '[{"name":"cxh","sex":"man"},{"name":"cxh1","sex":"man1"}]';
var obj = str.parseJSON();
alert(obj[0].name);

Note:

Among the methods mentioned above, only eval() is built into JavaScript. The other methods come from the json.js package. In newer versions of JSON, the API has been modified: JSON.stringify() and JSON.parse() are now injected into JavaScript's built-in objects. The former becomes Object.toJSONString(), and the latter becomes String.parseJSON(). If you receive errors indicating that toJSONString() or parseJSON() cannot be found, it means your json.js package version is too old.