title: Inserting new row in table from Ajax dynamically
body: <p>I am getting json string from the web service and want display that in html page. I have used ajax for dynamically displaying the row in the table. But the problem is all record are present in the single row.</p>
  
  <p>Code:</p>
  
  <pre><code> function showall(){
  
          var user = document.getElementById("user_name").value;
          alert(user);
           var row = $("&lt;tr&gt;");
           var nextrow = $("&lt;/tr&gt;");
  
             $.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($("&lt;td&gt;").html(value));
                        });
                 $('#requests').append(row);      
                 $('#requests').append(nextrow);
                 });           
  
              },
             error: function(e){
                  alert("error"+e+"has occured");
              }
          });
  
      }   
  </code></pre>
  
  <p>and html body</p>
  
  <pre><code>&lt;body onload="showall();"&gt;
          &lt;h1&gt;&lt;%=user%&gt;&lt;/h1&gt;
          &lt;input type="hidden" value="&lt;%=user%&gt;" id="user_name"&gt;
          &lt;table border="1" id="requests" style="border-collapse: collapse"&gt;
              &lt;tr&gt;
                  &lt;th&gt;RequestId&lt;/th&gt;
                  &lt;th&gt;Request&lt;/th&gt;
                  &lt;th&gt;Category&lt;/th&gt;
                  &lt;th&gt;Subcategory&lt;/th&gt;
                  &lt;th&gt;Department&lt;/th&gt;
                  &lt;th&gt;Status&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/body&gt;
  </code></pre>
  
  <p>output comes like</p>
  
  <pre><code>col11 | col12 | col13 | col21 | col22 | col23|
  </code></pre>
  
  <p>And i am expecting like</p>
  
  <pre><code>col11 | col12 | col13 | 
  col21 | col22 | col23|
  </code></pre>
  
  <p>The JSONArray which I am sending from web service is like</p>
  
  <pre><code>[{"requestid":1,"request":"Increase RAM from 4GB to 8GB","category":"Hardware","subcategory":"To increase the RAM","department":"System","status":"Pending for approval"},{"requestid":2,"request":"Increase RAM from 2GB to 4GB\n","category":"Hardware","subcategory":"To increase the RAM","department":"System","status":"Pending for approval"},{"requestid":3,"request":"Increase RAM from 1 GB to 4 GB","category":"Hardware","subcategory":"To increase the RAM","department":"System","status":"Pending for approval"}]
  </code></pre>
  
  <p>What I need to do in ajax more?
  Thank you</p>