JavaScript JSON.parse 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. Will JSON.parse complete faster when no whitespace is included? Logically, it will require less iteration.

Version 1: Here we invoke JSON.parse on a string that has no whitespace (space characters).

Version 2: In this version of the code, we call JSON.parse on a string that has spaces.

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

JavaScript program that times JSON.parse, no whitespace var x1 = performance.now(); // Version 1: parse JSON with no whitespace. for (var i = 0; i < 1000000; i++) { var result = JSON.parse('["cat","dog","bird"]'); } var x2 = performance.now(); // Version 2: parse JSON with whitespace. for (var i = 0; i < 1000000; i++) { var result = JSON.parse('["cat", "dog", "bird"]'); } var x3 = performance.now(); // Results. console.log("TIME 1: " + (x2 - x1)); console.log("TIME 2: " + (x3 - x2)); Output TIME 1 (2019): 542.299 TIME 2: 528.330

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.

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

Version 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 count = 0; var x1 = performance.now(); // Version 1: parse the JSON array on each iteration. for (var i = 0; i < 1000000; i++) { var text = '["cat", "bird", "frog"]'; var result = JSON.parse(text); count += result.length; } var x2 = performance.now(); // Version 2: use a JavaScript array. for (var i = 0; i < 1000000; i++) { var result = ["cat", "bird", "frog"]; count += result.length; } var x3 = performance.now(); // Results. console.log("TIME 1: " + (x2 - x1)); console.log("TIME 2: " + (x3 - x2)); Output TIME 1 (2019): 541.139 TIME 2: 10.509

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.

The Dev Codes

.Net

.NET Array Dictionary List String 2D Async DataTable Dates DateTime Enum File For Foreach Format IEnumerable If IndexOf Lambda LINQ Parse Path Process Property Regex Replace Sort Split Static StringBuilder Substring Switch Tuple

Java

Core Array ArrayList HashMap String 2D Cast Character Console Deque Duplicates File For Format HashSet If IndexOf Lambda Math ParseInt Process Random Regex Replace Sort Split StringBuilder Substring Switch Vector While

TheDeveloperBlog.com

JavaScript JSON.parse Examples

Related Links:

.Net

Java

Related Links