Get articles everyday as a email directly to your inbox:

Click to publicize, if you like this article :

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

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");
  $('.placeHolder').html("");
  num = 1;
  jsonData = $.trim($("#txtData").val());
  $.getJSON(jsonData, function (data) {
    $.each(data, function (key, val) {
      getJson(val);
    });
    $("#divMessage").css("display", "none");
  });
}

function getJson(JData) {
  $.each(JData, function (Jkey, Jval) {
    if (Jval && typeof Jval == "object") {
      getJson(Jval);
    } else {
      className = (num % 2 == 0) ? "even" : "odd";
      if (num == 1) {
        $('.placeHolder').append("<tr><th>Key</th><th>Value</td></th>");
      }
      $('.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