'How many people are from each city ? (Javascript Object)

I'm trying to list an object in the following format but I can't figure out how to enumarade the li or put them inside their own ol any help??

It looks like your post is mostly code; please add some more details. It looks like your post is mostly code; please add some more details.

let myObj = [
      {
        name:"Pablo", 
        age:"39", 
        job:"retired", 
        city:"LA", 
    }, 
    {
        name:"Ernesto", 
        age:"20", 
        job:"student", 
        city:"LA", 
    }, 
    {
        name:"Katrina", 
        age:"25", 
        job:"lawyer", 
        city:"LA", 
    }, 
    {
        name:"Mario", 
        age:"55", 
        job:"doctor", 
        city:"Lancaster", 
    }, 
    {
        name:"Luigi", 
        age:"50", 
        job:"Server", 
        city:"Lancaster", 
    }, 
    {
        name:"Peach", 
        age:"10", 
        job:"street", 
        city:"Labrea", 
    }
    ];
    

    let target = document.getElementById('target');    
    let cityName = null;
    
    for(i=0;i<myObj.length;i++){ 
    
    if (cityName == null && myObj[i].city){
        target.innerHTML += `<h3 class="cityTitle">${myObj[i].city}</h3>`;      
      }
    
      if (cityName && cityName != myObj[i].city){    
        if (cityName) {
          target.innerHTML += `<h3 class="cityTitle">${myObj[i].city}</h3>`;      
        }    
        target.innerHTML += `<li>${myObj[i].name}</li>`;
       
      } else {
        target.innerHTML += `<li>${myObj[i].name}</li>`;
           
      }
    
      cityName = myObj[i].city;   
    
    }
 .cityTitle{
      border: 1px solid black;
    }

    h3{
      margin: 0;
      padding: 0px 10px;
      background-color: rgb(245, 185, 185);
    }
<div id="target"></div>

Expected:

LA

  1. Pablo
  2. Ernesto
  3. Katrina

Lancaster

  1. Mario
  2. Luigi

Labrea

  1. Peach


Solution 1:[1]

Can you share what code you already have so we know what you're really trying to do?

Are you talking about tabs like the ones found on YouTube?

animated css tabs

If so, it looks like taking CSS from this Codepen will answer your question if you are in fact asking how to get tabs like the ones shown above. Just look around and see what you need to do to modify it to your liking and then adjust your code. Click on the link and go to #13 (won't let me post a Codepen without code, but scroll down to #13 and there's your answer) https://csshint.com/css-tabs/

I searched "animated css tabs" on Google, went to the first result and scrolled down to #13 to find this.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 nikolay