How do I add a header based on API information in Javascript

Question

So, I'm a little new at JavaScript, but I am trying to write an application that takes location information from an API, loops through it, and generates content based on that data. Right now I have most of it working, but I'm a little stuck on a new idea, since it's location based I thought it might be a good idea to group items that share city locations. So everything in San Diego is grouped together, and everything in Seattle is grouped and so on, but I am not sure how to do that. Hoping someone can point me in the right direction. Right now I have something like the top version, I'm trying to make it like the bottom

Answer 1

I know this is my question but I think I have an idea. Loop through my API, build my content then group them by a property, city in my case, and prepend an element, a div for example, before each group with their city. More looking for confirmation I'm heading the right direction.