html - Inserting new row in table from Ajax dynamically -
i getting json string web service , want display in html page. have used ajax dynamically displaying row in table. problem record present in single row.
code:
function showall(){ var user = document.getelementbyid("user_name").value; alert(user); var row = $("<tr>"); var nextrow = $("</tr>"); $.ajax({ type: "post", url: "webresources/hello/showrequests", data : user, success : function(data){ console.log(data); $.each(data, function(index, store){ $.each(store, function(key,value){ row.append($("<td>").html(value)); }); $('#requests').append(row); $('#requests').append(nextrow); }); }, error: function(e){ alert("error"+e+"has occured"); } }); } and html body
<body onload="showall();"> <h1><%=user%></h1> <input type="hidden" value="<%=user%>" id="user_name"> <table border="1" id="requests" style="border-collapse: collapse"> <tr> <th>requestid</th> <th>request</th> <th>category</th> <th>subcategory</th> <th>department</th> <th>status</th> </tr> </table> </body> output comes like
col11 | col12 | col13 | col21 | col22 | col23| and expecting like
col11 | col12 | col13 | col21 | col22 | col23| the jsonarray sending web service like
[{"requestid":1,"request":"increase ram 4gb 8gb","category":"hardware","subcategory":"to increase ram","department":"system","status":"pending approval"},{"requestid":2,"request":"increase ram 2gb 4gb\n","category":"hardware","subcategory":"to increase ram","department":"system","status":"pending approval"},{"requestid":3,"request":"increase ram 1 gb 4 gb","category":"hardware","subcategory":"to increase ram","department":"system","status":"pending approval"}] what need in ajax more? thank you
well, problem looks me row fetched outside of loop. adding row, appending it, , re-using same object (with previous appends) complete next round of data appending. need create new row object each time (inside loop).
update: see jsbin
function showall(){ var user = document.getelementbyid("user_name").value; $.ajax({ type: "post", url: "webresources/hello/showrequests", data : user, success : function(data){ $.each(resp, function(index, store){ var tr = $('<tr></tr>'); $.each(store, function(key,value){ tr.append($('<td></td>').html(value)); }); $('#requests').append(tr); }); }, error: function(e){ alert("error"+e+"has occured"); } }); }
Comments
Post a Comment