HomeSearch

JavaScript JSON.parse, stringify Examples

Convert a JSON string to an array of objects with JSON.parse. Also use JSON.stringify.

JSON.

JavaScript can encode complex programs. But it can also store data in arrays and objects. With JSON we use JavaScript to store data in an efficient format.

To parse JSON,

we can use JavaScript. The JSON.parse method is built for this purpose. It returns an easy-to-use JavaScript object.

An example.

Here is an example of the JSON.parse method on a string that contains an array. Please notice how the quotes of the "text" string are used to avoid a parsing error.Strings

Parse: We invoke JSON.parse on the text string. This returns an array of 3 elements—the strings cat, bird and frog.

JavaScript program that uses JSON.parse // This is a JSON text string. var text = '["cat", "bird", "frog"]'; // Use JSON.parse to convert string to array. var result = JSON.parse(text); // Print result count. console.log("COUNT: " + result.length); // ... Loop over result. for (var i = 0; i < result.length; i++) { console.log("JSON PARSED ITEM: " + result[i]); } Output COUNT: 3 JSON PARSED ITEM: cat JSON PARSED ITEM: bird JSON PARSED ITEM: frog

Stringify.

With this method we convert an object model into a string. In this example we just use a string array and convert it into a JSON string.
JavaScript program that uses JSON.stringify var array = ["cat", "bird", "frog"]; // Use JSON.stringify to get a string. var result = JSON.stringify(array); console.log("STRINGIFY: " + result); Output STRINGIFY: ["cat","bird","frog"]

Whitespace, JSON benchmark.

Here we test a string that has no whitespace (space characters) against one that has spaces. The JSON.parse call completes faster when no whitespace is included.

Tip: Each space must be processed by the JSON.parse method. So omitting spaces (minifying) will help performance.

JavaScript program that uses JSON.parse, no whitespace var x1 = performance.now(); for (var outer = 0; outer < 1000000; outer++) { // Parse JSON with no whitespace. var result = JSON.parse('["cat","dog","bird"]'); } var x2 = performance.now(); document.title = x2 - x1; JavaScript program that uses JSON.parse, has whitespace var x1 = performance.now(); for (var outer = 0; outer < 1000000; outer++) { // Parse JSON with whitespace. var result = JSON.parse('["cat", "dog", "bird"]'); } var x2 = performance.now(); document.title = x2 - x1; Output 272.54 ms JSON.parse, minified string 283.73 ms JSON.parse, string with spaces

Array, JSON benchmark.

Consider a page that must use an array. The array can be placed in a string and then decoded with JSON.parse, or it can be specified directly in the source.

Program 1: The array of 3 string elements in stored in a string and then expanded with JSON.parse in each iteration.

Program 2: The array is specified directly in the JavaScript program. It is only parsed once at load time.

Result: It is far faster to place a JavaScript object directly in the page source instead of in a JSON string. This reduces parsing time.

JavaScript program that benchmarks JSON.parse var x1 = performance.now(); var count = 0; for (var i = 0; i < 1000000; i++) { // Parse the JSON array on each iteration. var text = '["cat", "bird", "frog"]'; var result = JSON.parse(text); count += result.length; } var x2 = performance.now(); document.title = (x2 - x1); JavaScript program that benchmarks array var x1 = performance.now(); var count = 0; for (var i = 0; i < 1000000; i++) { // Use a JavaScript array. var result = ["cat", "bird", "frog"]; count += result.length; } var x2 = performance.now(); document.title = (x2 - x1); Output 301 ms JSON.parse 304 ms 304 ms 12 ms array 13 ms 13 ms

Benchmark, notes.

The benchmark shows that using JSON.parse does have significant overhead, but in many programs this is not relevant. It is also better to cache the results of JSON.parse.

JSON parsing time.

It is faster for a browser to parse a JSON string than raw JavaScript, as JSON is less complex—fewer features are supported. So it is faster to parse JSON.

In 2019: Having a string literal with JSON in it, and then calling JSON.parse, is faster than having an object literal in raw JavaScript.

Cost of JavaScript: v8.dev

So: For large object literals, keep them at the top-level (not in a nested function) and use JSON.parse on a string literal.

Tip: This can reduce total parsing time significantly—it helps the most on the largest object literals.

A summary.

JSON is an efficient and well-supported format for data. JavaScript has excellent support for JSON in the JSON.parse method.
Home
Dot Net Perls
© 2007-2019 Sam Allen. All rights reserved. Written by Sam Allen, info@dotnetperls.com.