It's best practice to create a string of your HTML to append and run one .append() call on that string:
//declare our output variable
var output = '| City |
';
//iterate through data
$.each(data, function(i, item){
//add to output variable
output += '| ' + item.city + ' |
';
}
//append the output to the DOM
$('#all_locations').append(output);
It's pretty common to see people pushing items into an array and joining that array for the append:
//declare our output variable (array)
var output = ['| City |
'];
//iterate through data
$.each(data, function(i, item){
//add to output variable
output.push('| ' + item.city + ' |
');
}
//append the output to the DOM after joining it together into a string
$('#all_locations').append(output.join(''));