Creating JSON Parser Using JQuery

JSON stands for “Javascript Object Notation” and often used to interchange the data between servers. Its use is increased in web development because of its flexibility and data support.

I have created Online JSON parser using JQuery library.


JSON Parser Using JQuery Tutorial

JSON Parser Using JQuery Tutorial

Live Demo – Online JSON Parser

Javascript code for the JSON Parser Using JQuery.

var num = 1;
var className = " ";
var jsonData = " ";

function parseJSON() {
  $("#divMessage").css("display", "block");
  num = 1;
  jsonData = $.trim($("#txtData").val());
  $.getJSON(jsonData, function (data) {
    $.each(data, function (key, val) {
    $("#divMessage").css("display", "none");

function getJson(JData) {
  $.each(JData, function (Jkey, Jval) {
    if (Jval && typeof Jval == "object") {
    } else {
      className = (num % 2 == 0) ? "even" : "odd";
      if (num == 1) {
      $('.placeHolder').append("<tr class="" + className + ""><td>" + Jkey + "</td><td>" + Jval + "</td></tr>");
      num = num + 1;

The code is self explanatory, i have used the getJSON() method of the jquery.

Live Demo – Online JSON Parser

This entry was posted in Web Technology and tagged , on by .

About Jitendra

Sr. Consultant at Cognizant Technology Solutions. Have more than 7 years of experience in technologies and frameworks like Salesforce, Node.Js, JAVA, PHP, JSP, Struts, Hibernate, C#, ASP.NET, SQL Server. Also many javaScript libraries like AngularJs, JQuery, JQuery Mobile, BootStrap. Connect : Linked In

Related posts

  • Toob

    This is very cool! I just don’t understand why/when you would want to use it…other than debug-stuff…? Am I missing something?

    • Jitendra Zaa

      Hey Toob,
      I have created this tutorial on demand of few developers who wanted to know how to parse the JSON using JQuery.