Как я могу исправить свой код, чтобы он возвращал все соответствующие города отдельным div?

Question

У меня есть следующий фрагмент кода JS в функции, которая отвечает на нажатие пользователем клавиши ввода (не отображается).Часть кода, которая меня интересует, показана:

   $.each(cityhash,function(key,value){
        if(value['city']== user_input) {
            $('#city').append(value['city']);
            $('#state').append(value['state']);
        }

У меня есть следующий хэш:

cityhash =  [{"address":"07288 Albertha Station","city":"Littelside","state":"Missouri"},{"address":"0615 Mervin Rapid","city":"Tessmouth","state":"South Carolina"},{"address":"779 Elody Lock","city":"Littelside","state":"New Mexico"}]

Как видите, город Littelside появляется дваждыв хеше .Моя проблема в том, что если есть два городских матча, города располагаются рядом друг с другом.Например LittelsideLittelside.Я хотел бы, чтобы каждый соответствующий Littelside появлялся в своем собственном div.Как мне это сделать?

Как я могу исправить свой код, чтобы вернуть все соответствующие города в их отдельном div ?

Заранее спасибо

Answer 1

Вместо того, чтобы устанавливать текст города в элементе с id="city", я бы сделал элемент с id="cities" и затем добавил бы элементы города внутри него.

$('#cities').append('<div class="city">' + value['city'] + ', ' + 
    value['state'] + '</div>');

Answer 2

var prev_city;

$.each(cityhash,function(key,value){
    if(value['city']== user_input) {
        $('#city').append(value['city']);
        $('#state').append(value['state']);

        if(value['city'] == prev_city){
            // Append to new div logic
        } else {
            prev_city = value['city'];
        }
    }
}

Не знаю, как вы распечатываете города прямо сейчас, но в основном вам нужно отследить предыдущий город, чтобы узнать, нужно ли добавить еще один div.

Answer 3

Примерно так:

$('#city').append($("<div>").html(value['city']));