jQuery / json loop not giving me full result with .html() - arrays

Question

// Calling the video function with JSON
$.getJSON("videos.php", function(data){
// first check if there is a member available to display,
//if not then show error message
if(data == '') {
$('#tabs-4').html("<div class='errorMember'>Sorry, there is currently no member available videos</div>");
}
// if there is a member, then loop through each data available
else {
$.each(data, function(i,name){
content = '<div class="left"><img src="' + name.pic + '"/>';
content += '<p>' + name.name + '</p>';
content += 'Video link';
content += '</div><br/><hr>';
$("#tabs-4").html(content);
});
}
});​
The problem is that it only gives me one result instead of list of results from the array but if I appendTo(content) .. it adds the full list of results under the current which is not what I want because I need to refresh that content with updated data.
Any ideas to what I'm doing wrong?

Answer 1

Probably so far only the last Element is getting Displayed .
// Calling the video function with JSON
$.getJSON("videos.php", function(data){
// first check if there is a member available to display, if not then show error message
if(data == '') {
$('#tabs-4').html("<div class='errorMember'>Sorry, there is currently no member available videos</div>");
}
// if there is a member, then loop through each data available
else {
//If you want to Clear the Container html
$("#tabs-4").html('');
$.each(data, function(i,name){
content = '<div class="left"><img src="' + name.pic + '"/>';
content += '<p>' + name.name + '</p>';
content += 'Video link';
content += '</div><br/><hr>';
$("#tabs-4").append(content);
});
}
});

Answer 2

Empty the element before filling it:
$('#tabs-4').empty();
$.each(data, function(i,name){
var content =
'<div class="left"><img src="' + name.pic + '"/>' +
'<p>' + name.name + '</p>' +
'Video link' +
'</div><br/><hr>';
$("#tabs-4").append(content);
});
Or put all the elements in the string before putting it in the element:
var content = '';
$.each(data, function(i,name){
content +=
'<div class="left"><img src="' + name.pic + '"/>' +
'<p>' + name.name + '</p>' +
'Video link' +
'</div><br/><hr>';
});
$("#tabs-4").html(content);

Answer 3

If I well understood, probably you may want do something like this
...
else {
$("#tabs-4").empty(); // remove previous data (if any)
$.each(data, function(i,name){
content = '<div class="left"><img src="' + name.pic + '"/>';
content += '<p>' + name.name + '</p>';
content += 'Video link';
content += '</div><br/><hr>';
$("#tabs-4").append(content); // append new data
});
}