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

Question

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>

What does your output look like currently? Are you getting any rows at all in your table? — Daryl
– Daryl, Commented Mar 12, 2015 at 16:56
Is your json data well-formed? Try to call it directly from a browser address bar. — collapsar
– collapsar, Commented Mar 12, 2015 at 17:08
@collapsar yes sir , i can see my json data very well in my brower — narahari_arjun
– narahari_arjun, Commented Mar 12, 2015 at 17:33
Are you receiving any console errors? I would set a break point inside your loop and make sure json is actually formatted the way you think it is. — Daryl
– Daryl, Commented Mar 12, 2015 at 18:03

Dave · Accepted Answer · 2015-03-12 22:47:36Z

3

Well you've got a couple problems:

You should be using jQuery.getJSON() not jQuery.parseJSON()
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>

edited Mar 12, 2015 at 22:47

answered Mar 12, 2015 at 17:07

Dave

11k3 gold badges45 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

narahari_arjun Over a year ago

sir , i had used getJSON before, but i am not seeing any result on my browser when i run my html code

Dave Over a year ago

I found your other issue. Please see my updated answer

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related