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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
      
    <meta name="viewport"
        content="width=device-width, 
                initial-scale=1">
    <script src="
    </script>
</head>
  
<body>
    <center>
        <h1 style="color:green;">GeeksforGeeeks</h1>
        <h3>Top 3 Students List</h3>
        <br>
        <table style="border:10px;border-style: double;" 
                border="2" cellpadding="20"
                cellspacing="20">
            <thead>
                <tr>
                    <th>NAME</th>
                    <th>ROLL NO</th>
                    <th>TOTAL MARK</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td align="center"
                        data-stud="student1"
                        data-topstud="Name">
                </td>
                    <td align="center"
                        data-stud="student1"
                        data-topstud="Roll">
                </td>
                    <td align="center"
                        data-stud="student1"
                        data-topstud="TotalMark">
                </td>
                </tr>
                <tr>
                    <td align="center"
                        data-stud="student2"
                        data-topstud="Name">
                </td>
                    <td align="center"
                        data-stud="student2"
                        data-topstud="Roll">
                </td>
                    <td align="center"
                        data-stud="student2"
                        data-topstud="TotalMark">
                </td>
                </tr>
                <tr>
                    <td align="center"
                        data-stud="student3"
                        data-topstud="Name">
                </td>
                    <td align="center"
                        data-stud="student3"
                        data-topstud="Roll">
                </td>
                    <td align="center"
                        data-stud="student3"
                        data-topstud="TotalMark">
                </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th>:</th>
                    <th> Top 3 Students List</th>
                    <th>:</th>
                </tr>
            </tfoot>
        </table>
    </center>
  
    <script>
        var data = {
                "student1": [{
                    "Name": "Arun",
                    "Roll": 10056,
                    "TotalMark": 98,
                }],
                "student2": [{
                    "Name": "Vinoth",
                    "Roll": 10057,
                    "TotalMark": 96,
                }],
                "student3": [{
                    "Name": "Zafar",
                    "Roll": 10068,
                    "TotalMark": 85,
                }]
            }
              
        //AJAX callback:
        $('td').html(function() {
            var $block = $(this)
            return data[$block.data('stud')]
                    [0][$block.data('topstud')];
        });
          
        $("th").css("background-color", "#08f");
        $("tr:nth-child(1)").css("background-color", "green");
        $("tr:nth-child(2)").css("background-color", "yellow");
        $("tr:nth-child(3)").css("background-color", "red");
    </script>
</body>
  
</html>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, 
                initial-scale=1">
    <script src="
    </script>
      
    <style>
        div {
            border: 2px solid green;
            padding: 20px;
        }
          
        h2 {
            color: red;
        }
          
        b {
            color: #08f;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color:green;">
            GeeksforGeeeks
        </h1>
        <br>
  
        <div>
            <h2>Employee Details</h2>
            <p></p>
            <h2>Website Details</h2>
            <em></em>
        </div>
    </center>
  
    <script>
      
        // Using jQuery.parseJSON()
        var company = jQuery.parseJSON(
            '{"employee_name":"Adam","age":25,"salary":"11,500"}');
      
        $('p').html("<b>Employee Name:</b> " + company.employee_name
                    + ",<br><b>Age:</b> " + company.age + 
                    ",<br> <b>Sal/Month:</b> " + company.salary);
    </script>
      
    <script>
        $(document).text(function() {
            var $mytxt = '{ "website":"GeeksforGeeeks", 
            "url":"https://www.geeksforgeeks.org/" }'
              
            // Using JSON.parse()
            var $web = JSON.parse($mytxt);
            var $block = $('em');
            return $block.text("WebsiteName: " + 
                            $web.website +
                            ", URL: " + $web.url);
        });
    </script>
</body>
  
</html>

chevron_right


Output:

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



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.