CODEWITHSUNDEEP
javascriptjqueryhtmljson
narahari_arjun
narahari_arjun

Reputation: 643

how to parse json object using jquery and print the output in tabular format in html page?

I have written a program to create a json object from the list of values obtained from database and here is how my json looks

{
 1: {
 age: "21",
 name: "arjun",
 gender: "male"
},
 2: {
 age: "30",
 name: "ravi",
 gender: "male"
},
 3: {
 age: "57",
 name: "pushpa",
 gender: "female"
 }
}

Now i want to parse it using jquery and print the result in tabular form in html. I have tried to some extent , but not understanding what to do further, so please need some guidance

My json_parse.js :

$(document).ready(function() {
var url = "http://182.168.1.115:8082/JqueryForm/userdetails_json.jsp"
$.parseJSON(url, function(json) {
    var tr;
    for (var i = 0; i < json.length; i++) {
        tr = $('<tr/>');
        tr.append("<td>" + json[i].name + "</td>");
        tr.append("<td>" + json[i].age + "</td>");
        tr.append("<td>" + json[i].gender + "</td>");
        $("#table").append(tr);
    }
});

});

My list_user.html:

<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">  
</script>
<script src="json_parse.js"></script>
</head>
<body>
    <table name="Table" id="table">

    </table>
</div>
</body>
</html>

Upvotes: 0

Views: 3059

Answers (1)

Dave
Dave

Reputation: 10924

Well you've got a couple problems:

  1. You should be using jQuery.getJSON() not jQuery.parseJSON()
  2. You're JSON isn't an array, so length is not defined and you cannot loop through it the way you are.

The easy fix is to re-write your loop using jQuery.each() to enumerate your object:

$.each(json, function(i) {
  var tr = $('<tr/>');
  tr.append("<td>" + json[i].name + "</td>");
  tr.append("<td>" + json[i].age + "</td>");
  tr.append("<td>" + json[i].gender + "</td>");
  $("#table").append(tr);
});

There's a working snippet below to see it in action.

$(document).ready(function() {
  var json = { 1: {age: "21", name: "arjun",gender: "male"}, 2: {age: "30",name: "ravi",gender: "male"}, 3: {age: "57", name: "pushpa", gender: "female"}};
  
  $.each(json, function(i) {
    var tr = $('<tr/>');
    tr.append("<td>" + json[i].name + "</td>");
    tr.append("<td>" + json[i].age + "</td>");
    tr.append("<td>" + json[i].gender + "</td>");
    $("#table").append(tr);
  });
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="table"></table>

Upvotes: 3

Related Questions