Loop shows duplicate data using .each

Loop shows duplicate data using .each

I wrote this little function, it gets a json feed,then loops through the rows and displays the data. the problem I have is, if there are two officers listed, it shows each officer twice, if there are three officers listed, it shows each officer three times. I'm not seeing why my loop is doing it that way, I wrote the same kind of loop in php using foreach and it works fine?


  1. $(document).ready(function () {
  2.   $.ajax({                                      
  3.     url: 'http://urlhere.com/something.php', data: "", dataType: 'json',  success: function(rows)        
  4.     {
  5.       for (var i in rows)
  6.       {
  7.         var row = rows[i];          
  8.         var id = row[0];
  9.         var vname = row[1];
  10.         var vphone = row[2];
  11.         var vaddress = row[3];
  12.         var vcity = row[4];
  13.         var vstate = row[5];
  14.         var vzip = row[6];
  15.         var vrole = row[7];
  16.             $.each(rows, function(i, data){
  17.             $("#officers").append('<div data-role="collapsible"><h3>'+vname+'</h3><p><strong>Phone:</strong> '+vphone+'</p><p><strong>Address: </strong>'+vaddress+'<br>'+vcity+', '+vstate+' '+vzip+'</p></div>');
  18.           }) 
  19.       } 
  20.     } 
  21.   });