Open In App
Related Articles

How to universally parse JSON into blocks using jQuery ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report
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.
<!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>

                    
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.
<!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>

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

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!


Last Updated : 18 Nov, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads
Complete Tutorials