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");
  $('.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

Posted

in

by


Related Posts

Comments

2 responses to “Creating JSON Parser Using JQuery”

  1. Toob Avatar
    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?

    1. Jitendra Zaa Avatar

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

      Regards,
      Jitendra

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Discover more from Jitendra Zaa

Subscribe now to keep reading and get access to the full archive.

Continue Reading