How to Iterate JSON object and display using javascript

Question

I'm trying to fetch data from API and displaying it on my webpage. Here is my JS code.

// api url
const api_url = "https://api-url";

async function getapi(url) {
    
    const response = await fetch(url);
    
    var data = await response.json();
    console.log(data);

let tab = 
        `<p>${data.group1.name}</p>`;
        `<p>${data.group1.age}</p>`;
        `<p>${data.group2.name}</p>`;
        `<p>${data.group2.age}</p>`;

    document.getElementById("result").innerHTML = tab;

}

getapi(api_url);

<div id="result"></div>

And this is the API format

{
   "group1":{
      "name":"name1",
      "class":"A",
      "age":"19"
   },
      "group2":{
      "name":"name2",
      "class":"B",
      "age":"19"
   },
   ...
}

How can i iterate each object and display the values in my webpage. Instead of doing like above.