How to Render Table Row from an API

Question

I have a list of object in an array like this

const data =[
  {
      "course": "Advanced Diploma of Accounting",
      "provider": [
          {
              "school": "Gold Coast Learning Centre PTy LTD as Trustee for GCLC Unit Trust",
              "duration": "32"
          },
          {
              "school": "Business Institute of Australia Pty LTD",
              "duration": "52"
          }
        ]
  },
  {
   
      "course": "Advanced Diploma of Business",
      "provider": [
          {
              "school": "AUSTRALIA ACADEMY INTERNATIONAL PTY LTD",
              "duration": "52"
          },
          {
              "school": "Australian College of Digital Technologies Pty Ltd",
              "duration": "22"
          }
        ]
  },
  {
      "course": "Advanced Diploma of Information Technology",
      "provider": [
          {
              "school": "GRIFFIN COLLEGE OF MANAGEMENT & TECHNOLOGY PTY. LTD.",
              "duration": "104"
          },
          {
              "school": "OHS Media Services Pty Ltd",
              "duration": "69"
          }
        ]
  }
]

I have code Which makes the table and the code looks something like this

function buildtable(data) {
  const [{course,level,provider}] = data
  console.log(data)

 tablebody.innerHTML = provider.map(item=> {
   return `
    <tr>
      <td>${course}</td>
      <td>${item.provider}</td>
    </tr>
   `
 }).join('')

}

It renders table something like this in the DOM

Course	Provider	Duration
Advanced Diploma of Accounting	Gold Coast Learning	32
Advanced Diploma of Accounting	Business Institute	52

But I want something Like this

Course	Provider	Duration
Advanced Diploma of Accounting	Gold Coast Learning	32
Advanced Diploma of Accounting	Business Institute	52
Advanced Diploma of Information Technology	OHS Media Service	69
Advanced Diploma of Information Techonology	Griffin College	52
Advanced diploma of Business	Australian College	22

Answer 1

Try this, works for me:

data.map((course) => {
  course.provider.map(({ school, duration }) => {
    return (tablebody.innerHTML += `
      <tr>
        <td>${course.course}</td>
        <td>${school}</td>
        <td>${duration}</td>
      </tr>
    `);
  });
});

So we map through the courses, then the provider within them and cause each loop to render the course name out each time it shows the provider items since it's the same course name for each inside. Then we use += on the innerHTML so it can append each item as it loops through.