Question

I have the following piece of JS code within a function that responds to the user pressing enter (not displayed). The part of the code I am concerned with is shown:

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

I have the following hash:

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"}]

As you can see, the city of Littelside appears twice in the hash. My problem is if there are two city matches, the cities are placed directly beside one another. For example LittelsideLittelside. I would like each matching Littelside, to appear in its own div. How do I do this?

How can I correct my code to return all matching cities in their own separate div?

Thank you in advance

Answer 1

Instead of setting the city text in an element with id="city", I would make an element with id="cities" and then append the city elements inside of that.

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