How to universally parse JSON into blocks using jQuery ?

In jQuery, to parse any data to any block is carried over by using DOM Insertion methods. Some of DOM Insertion methods are append(), appendTo(), html(), prepend(), prependTo(), text(). To parse JSON into any block is also handled in same way but along with Ajax callback functions and parse.JSON() methods. Here parse.JSON() methods is deprecated in jQuery 3.0, so JSON.parse() method used instead in later versions.

Syntax:

/* JSON data might be in array also */
var $json-data= '{json-index:json-values}'

/* Creating object for parsed JSON data */
var $json-object= JSON.parse($jsondata);

/* Parse text along with JSON data-value
 with respect to index */
$("selected block").text($json-object.index);

or

/* Parse HTML tag along with JSON data-value
 with respect to index */
$("selected block").html( "opentag" + $json-object.index + "closetag");

Approach 1:

• Let us apply AJAX Callback function using $.ajax() method.
• $.ajax() method carried out in different way, but here we just passing configuration object/object literal as its sole arguments to the $.ajax() method along with JSON Array data.

Example 1: In below example, AJAX Callback function used to parse JSON array into HTML block.

Output:

Approach 2:

• Parsing JSON string using native JSON.parse method.
• JSON.parse method is used instead of jQuery 3.0’s deprecated method $.parseJSON().

Example 2: In below example, jQuery.parseJSON() method and JSON.parse() method used to parse JSON data into a HTML block.

Output:

Reference: https://api.jquery.com/