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.
<!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/
Please Login to comment...