Q:

JSON array in a jquery .each displays only last value of array when .append is used

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Javascript Array Table</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<meta name="" content="">
</head>
<body>

<table>
     <thead>
          <tr>
               
               <th>Details</th>
               <th>Data</th>
               
           </tr>
     </thead>
     <tbody id="tbody"></tbody>
</table>


<script type="text/javascript">

//jQuery( document ).ready(function() {
function arrayprocess(){
  
  var display;
  
  var arrayobj = [{"name": "John","dept": "science","phone": "xxx-xxx-xxxx"}];
   
  jQuery.each(arrayobj, function(key, value){ 
   
   jQuery.each(value, function(label, answer){
    display = '<tr><td>'+label+ '</td><td>' +answer+'</td></tr>'});


  });
  $('#tbody').append(display);
  

}
arrayprocess();
//});
</script>


</body>
</html>

Problem:
The JSON only array's last value is displayed. The rest of previous two values that is, name:John and dept:science...
Present output:
Details Data
phone   xxx-xxx-xxxx
Expected Output
Details Data
Name John
dept science
phone   xxx-xxx-xxxx

A:

Your append statement needs to be inside the each function or else it will only append the last result, ex:
jQuery.each(arrayobj, function(key, value){ 

    jQuery.each(value, function(label, answer){
        display += '<tr><td>'+label+ '</td><td>' +answer+'</td></tr>';
    });
});

