Did you know that you can navigate the posts by swiping left and right?

Understand JSON - Part 2: Parse JSON with JavaScript

February 08, 2016, March 09, 2016 | Comments

category: TECH
json javascript jquery

JSON is widely used in web application by reading data from a web server and display in a web page. With the popularity of web application and the amount of data, JSON is also used to transport and parse big files. Besides its benefit as data format, JSON files also come as a massive concatenation of characters (one huge string) with encoded strings or arrays inside it which could not be easily consumed by other programming languages, even including JavaScript itself. Therefore, the job of parser which takes this huge string and break it up into data structure comes in place in order to let other programming language work with it smoothly. (Note: Encoding JSON is the opposite of parsing JSON.)

Since JSON was derived from JavaScript and its syntax is a subset of the language, it is more natural to use JavaScript to parse JSON data. Typicall, there are three different ways to do this:

  1. Use eval() function.
  2. Use JSON.parse() function.
  3. Use JavaScript library, such as jQuery.js.

1. Eval()

A quick but dirty way to parse JSON data format is to use eval() function. It can be used to convert the well formed JavaScript Object Notation(JSON) string into an object.

Syntax: eval(string)

For example:

// Use eval() function to parse JSON

//Example 1:
var myName1 = eval("[ { firstName: 'Yi' }, { lastName: 'Du' } ]");

console.log(myName1[0].firstName);//Yi
console.log(myName1[1].lastName);//Du

//Example 2:
myName2 = eval('(' + '{"firstName": "Yi", "lastName": "Du"}' + ')');

console.log(myName2.firstName);//Yi
console.log(myName2.lastName);//Du

//Example 3:
var newName =  "var myName3 = {firstName: 'Yi', lastName: 'Du'};";

eval(newName);

console.log(myName3.firstName);//Yi
console.log(myName3.lastName);//Du

In the two examples above, I first use JSON array as string and let it parse through eval() function. The result is persisted in the variable myName1 and could be derived as JavaScript objects by calling each component from the myName1 variable.

However, in the example 2, string used as parameters by eval() function is JSON object. Since curly braces could also be used to start a block, JavaScript is confused if we use JSON object as parameter to let eval() parse. Therefore, we use parentheses around the expression.

Alternatively, example 3 shows another way to make it clear to eval() by assigning object to a variable within the eval() string.

However, using eval() function is not the best way, actually not even a better way, to parse a JSON file for various reasons: 1). security: since eval() can execute any JavaScript program regardless the source, it leaves the door open to a malicious third party to run malicious codes on user’s machine with the permission of your website, 2). speed: eval() is also slower than other alternatives since it has to invoke JavaScript interpreter. It is actually a hungry memory eater while executing.

2. JSON.parse()

ECMA5 specifies native support to JSON. There are two primary methods for handling JSON: JSON.parse (which converts a JSON string into a JavaScript object) and JSON.stringify (which convert a JavaScript object into a serialized string).

Syntax: JSON.parse(text[, reviver])

For example:

// Use JSON.parse() function to parse JSON

//Example 4:
myName4 = JSON.parse('{"firstName": "Yi", "lastName": "Du"}');

console.log(myName4.firstName);//Yi
console.log(myName4.lastName);//Du

//Example 5:
myName5 = JSON.parse('{"firstName": 'Yi', "lastName": 'Du'}');

console.log(myName5.firstName);//Uncaught SyntaxError: missing ) after argument list (line 8)
console.log(myName5.lastName);//Uncaught SyntaxError: missing ) after argument list (line 8)

In example 4, JSON.parse() interprets a string and returns its values by calling a variable assigned. However, in example 5, JSON.parse() has difficulty in parsing(almost!) the same string. Remember, the syntax of JSON is only a subset of JavaScript and looking up JSON syntax specification, this string {“firstName”: ‘Yi’, “lastName”: ‘Du’} is not a valid JSON since single quotation mark is not JSON-compliant. In this scenario, in order to let JSON.parse() to work properly, only string in example 4 is valid.

The reviver parameter is the optional function when calling JSON.parse() function. It takes two parameters: key and value which could filter and transform the results.

//Example 6:
var info = JSON.parse('{"name": "Yi Du", "age": 56}', function(k, v) {
  if (k === '') { return v; } // if topmost value, return it,
  return v / 2;               // else return v / 2.
  
});      
console.log(info.name);//NaN
console.log(info.age);//28

The reviver is ultimately called with the empty string and the topmost value to permit transformation of the topmost value. Be certain to handle this case properly, usually by returning the provided value, or JSON.parse() will return undefined.

JSON.parse() is not supported by all browsers, especially in old browsers. All browsers supporting JSON.parse() could be found here.

3. jQuery.js

Both eval() and JSON.parse() function have their own limitations. Sometimes, using JavaScript libraries. There are many libraries that could do this and I will focus only jQuery.js here only.

At the very high level, jQuery.js will use native JSON.parse() method if available. Otherwise, it will try to use its new function which is quite similar as eval() to parse the data.

Reference:

(1). Eval() by MDN, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval.

(2). Why Won’t eval() Eval My JSON? (Or: JSON Object !== Object Literal), http://rayfd.me/2007/03/28/why-wont-eval-eval-my-json-or-json-object-object-literal/.

(3). ECMAScript 2015 Language Specification, http://www.ecma-international.org/ecma-262/6.0/#sec-json.parse.

(4). JSON.pars() by MDN, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse.