Как перебрать ассоциативный массив от сервера(PHP) на JS?

есть массив данных который передает сервер в ответ на ajax запрос

$arr = array("1" => array("name" => "Bill", "city" => "Toronto"), "2" => array("name" => "Steve", "city" => "California"));

echo '{"data" : "'.$arr.'", "status" : "normal"}';

и в JS нужно это перебрать и отобразить элементы но когда пытаюсь выходит только Array и все вот код

$(document).ready(function(){
		$.ajax({
			type: 'POST',
			url: 'ajax.php',
			data: page,
			beforeSend: alert("Before"),
			success: function(respond){
				var obj = JSON.parse(respond);
				
				for (var i in obj.data)
				alert("Key = " + i + " --- VALUE = " + obj.data[i]); /* Перебирает слово Array */
			}
		});
	});