Not a problem. I just realised that having country and data.cities[index] can also raise some questions. You can make this more internally consistent by ignoring the first parameter and using a consistent reference to the array instead.
$('#location').append(
$.map(data.Countries, function (ignore, index) {
return '<tr><td>' + data.Countries[index] + '</td><td>' + data.Cities[index] + '</td></tr>';
}).join()
);
And the reason for the term ‘ignore’ is as a placeholder, so we can get the index variable. Calling it ignore also allows code linters such as jsLint to know that they shouldn’t complain about an unused variable.
It all depends on what you consider to be more important.
Another approach is to move parts such as the row creation code out to a separate function, and even the function that us used by map to create the countries and cities row:
function createTableRow(cells) {
var tds = cells.map(function (cellContent) {
return '<td>' + cellContent + '</td>';
}).join('');
return '<tr>' + tds + '</tr>';
}
var countriesAndCitiesRow = function (ignore, index) {
return createTableRow([
data.Countries[index],
data.Cities[index]
]);
};
$('#location').append(
$.map(data.Countries, countriesAndCitiesRow)
);
This ends up with us being easily able to see that the location is made by mapping the countries to the countriesAndCitiesRow function, and the rest can be easily followed from there.
As Uncle Bob says when it comes to improving your code, extract till you drop.