[Pregunta]Problema con HTML, Json y Ajax

Iniciado por Victor26, 31 Mayo 2020, 04:19 AM

0 Miembros y 1 Visitante están viendo este tema.

Victor26

 Buenas noches, hoy vengo a pedir su apoyo para un problema que me esta doliendo la cabeza (Por el poco conocimiento que he tenido, el cual estoy aprendiendo).
INTRODUCCION:

Estoy haciendo una pequeña vista con html, donde introduzco unos datos que vienen en formato (json), usando (ajax). Son datos de unos cursos los cuales vienen con los capitulos y sus respectivos videos.
CODIGO JSON:
Código (javascript) [Seleccionar]

{
 "courses": [
  {
     "name": "Programming - Android Leveraging the power of the android platform",
     "color": "#BCCEF4",
     "list":
     [
      {
"chapter":"Leveraging the power of the android platform",
"videos":[
           {
           "name":" Understanding the android threading model",
           "video":"programming/Android/Leveraging the power of the android platform/1. Understanding the android threading model.mkv",
           "subtitle":"file.vtt"
            },
           {
           "name":" Performing Background work with Services",
           "video":"programming/Android/Leveraging the power of the android platform/2. Performing Background work with Services.mkv",
           "subtitle":"file.vtt"
           },
           {
           "name":" Scheduling Background work with jobScheduler",
           "video":"programming/Android/Leveraging the power of the android platform/3. Scheduling Background work with jobScheduler.mkv",
           "subtitle":"file.vtt"
           },
           {
           "name":" working with Broadcast Receivers",
           "video":"programming/Android/Leveraging the power of the android platform/4. working with Broadcast Receivers.mkv",
           "subtitle":"file.vtt"
           },
           {
           "name":" Using Alarms to shedule time-sensitive task",
           "video":"programming/Android/Leveraging the power of the android platform/5. Using Alarms to shedule time-sensitive task.mkv",
           "subtitle":"file.vtt"
           }
       ]
}

     ]
   },
   {
     "name": "Programming - Android Apps with Kotlin- ViewModel and Lifecycle",
     "color": "#BCCEF4",
     "list":
     [
         {
           "chapter":"00. Course Overview",
           "videos":[
               {
               "name":" Course Overview",
               "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/00. Course Overview/00. Course Overview.mp4",
               "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/00. Course Overview/00. Course Overview.vtt"
               }
           ]
          },
          {
           "chapter":"01. Managing Activity State with ViewModel",
           "videos":[
                       {
                       "name":" Introduction",
                       "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/00. Introduction.mp4",
                       "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/00. Introduction.vtt"
                       },
                       {
                       "name":" Activities - More Than Just a Pretty Face",
                       "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/01. Activities - More Than Just a Pretty Face.mp4",
                       "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/01. Activities - More Than Just a Pretty Face.vtt"
                       },
                       {
                       "name":" Managing Activity State with ViewModel",
                       "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/02. Managing Activity State with ViewModel.mp4",
                       "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/02. Managing Activity State with ViewModel.vtt"
                       },
                       {
                       "name":" There's a Bug in Our App",
                       "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/03. There's a Bug in Our App.mp4",
                       "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/03. There's a Bug in Our App.vtt"
                       },
                       {
                       "name":" Adding a ViewModel and Build Dependencies",
                       "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/04. Adding a ViewModel and Build Dependencies.mp4",
                       "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/04. Adding a ViewModel and Build Dependencies.vtt"
                       },
                       {
                       "name":" Accessing Our ViewModel with a Lazy Property",
                       "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/05. Accessing Our ViewModel with a Lazy Property.mp4",
                       "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/05. Accessing Our ViewModel with a Lazy Property.vtt"
                       },
                       {
                       "name":" Restoring the Activity State",
                       "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/06. Restoring the Activity State.mp4",
                       "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/06. Restoring the Activity State.vtt"
                       },
                       {
                       "name":" That Bug's Fixed, but We Just Found Another One",
                       "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/07. That Bug's Fixed, but We Just Found Another One.mp4",
                       "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/07. That Bug's Fixed, but We Just Found Another One.vtt"
                       },
                       {
                       "name":" Managing More Complex State with ViewModel",
                       "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/08. Managing More Complex State with ViewModel.mp4",
                       "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/08. Managing More Complex State with ViewModel.vtt"
                       },
                       {
                       "name":" Verifying App Behavior",
                       "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/09. Verifying App Behavior.mp4",
                       "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/09. Verifying App Behavior.vtt"
                       },
                       {
                       "name":" Summary",
                       "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/10. Summary.mp4",
                       "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/10. Summary.vtt"
                       }
           ]
           },
           {
               "chapter":"02. Maintaining Activity State during System-initiated Shutdowns",
               "videos":[
                           {
                           "name":" Introduction",
                           "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/02. Maintaining Activity State during System-initiated Shutdowns/00. Introduction.mp4",
                           "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/02. Maintaining Activity State during System-initiated Shutdowns/00. Introduction.vtt"
                           },
                           {
                           "name":" Activity Destruction Effects on State",
                           "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/02. Maintaining Activity State during System-initiated Shutdowns/01. Activity Destruction Effects on State.mp4",
                           "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/02. Maintaining Activity State during System-initiated Shutdowns/01. Activity Destruction Effects on State.vtt"
                           },
                           {
                           "name":" Durable Activity State",
                           "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/02. Maintaining Activity State during System-initiated Shutdowns/02. Durable Activity State.mp4",
                           "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/02. Maintaining Activity State during System-initiated Shutdowns/02. Durable Activity State.vtt"
                           },
                           {
                           "name":" Identifying the Need for Durable State",
                           "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/02. Maintaining Activity State during System-initiated Shutdowns/03. Identifying the Need for Durable State.mp4",
                           "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/02. Maintaining Activity State during System-initiated Shutdowns/03. Identifying the Need for Durable State.vtt"
                           },
                           {
                           "name":" Persisting State of a Simple Value",
                           "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/02. Maintaining Activity State during System-initiated Shutdowns/04. Persisting State of a Simple Value.mp4",
                           "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/02. Maintaining Activity State during System-initiated Shutdowns/04. Persisting State of a Simple Value.vtt"
                           },
                           {
                           "name":" Restoring State of a Simple Value",
                           "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/02. Maintaining Activity State during System-initiated Shutdowns/05. Restoring State of a Simple Value.mp4",
                           "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/02. Maintaining Activity State during System-initiated Shutdowns/05. Restoring State of a Simple Value.vtt"
                           },
                           {
                           "name":" Summary",
                           "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/02. Maintaining Activity State during System-initiated Shutdowns/06. Summary.mp4",
                           "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/02. Maintaining Activity State during System-initiated Shutdowns/06. Summary.vtt"
                           }
               ]
               },
               {
                   "chapter":"03. Persisting Complex Activity State",
                   "videos":[
                               {
                               "name":" Introduction",
                               "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/03. Persisting Complex Activity State/00. Introduction.mp4",
                               "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/03. Persisting Complex Activity State/00. Introduction.vtt"
                               },
                               {
                               "name":" We're Still Losing Some of Our Activity State",
                               "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/03. Persisting Complex Activity State/01. We're Still Losing Some of Our Activity State.mp4",
                               "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/03. Persisting Complex Activity State/01. We're Still Losing Some of Our Activity State.vtt"
                               },
                               {
                               "name":" Activity State and Data Model Cooperation",
                               "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/03. Persisting Complex Activity State/02. Activity State and Data Model Cooperation.mp4",
                               "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/03. Persisting Complex Activity State/02. Activity State and Data Model Cooperation.vtt"
                               },
                               {
                               "name":" Moving the Details to the ViewModel",
                               "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/03. Persisting Complex Activity State/03. Moving the Details to the ViewModel.mp4",
                               "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/03. Persisting Complex Activity State/03. Moving the Details to the ViewModel.vtt"
                               },
                               {
                               "name":" Persisting State of an Object Graph",
                               "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/03. Persisting Complex Activity State/04. Persisting State of an Object Graph.mp4",
                               "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/03. Persisting Complex Activity State/04. Persisting State of an Object Graph.vtt"
                               },
                               {
                               "name":" Effectively Using ViewModel and Durable State Together",
                               "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/03. Persisting Complex Activity State/05. Effectively Using ViewModel and Durable State Together.mp4",
                               "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/03. Persisting Complex Activity State/05. Effectively Using ViewModel and Durable State Together.vtt"
                               },
                               {
                               "name":" Verifying State Management Behavior",
                               "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/03. Persisting Complex Activity State/06. Verifying State Management Behavior.mp4",
                               "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/03. Persisting Complex Activity State/06. Verifying State Management Behavior.vtt"
                               },
                               {
                               "name":" Summary",
                               "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/03. Persisting Complex Activity State/07. Summary.mp4",
                               "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/03. Persisting Complex Activity State/07. Summary.vtt"
                               }
                   ]
                   },
                   {
                       "chapter":"04. Subscribing to Lifecycle Events",
                       "videos":[
                                   {
                                   "name":" Introduction",
                                   "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/00. Introduction.mp4",
                                   "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/00. Introduction.vtt"
                                   },
                                   {
                                   "name":" Cooperating with Activity Lifecycle",
                                   "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/01. Cooperating with Activity Lifecycle.mp4",
                                   "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/01. Cooperating with Activity Lifecycle.vtt"
                                   },
                                   {
                                   "name":" Our App's Get-together Feature",
                                   "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/02. Our App's Get-together Feature.mp4",
                                   "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/02. Our App's Get-together Feature.vtt"
                                   },
                                   {
                                   "name":" Managing Location with Activity Functions",
                                   "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/03. Managing Location with Activity Functions.mp4",
                                   "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/03. Managing Location with Activity Functions.vtt"
                                   },
                                   {
                                   "name":" Fixing the Location Resource Leak",
                                   "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/04. Fixing the Location Resource Leak.mp4",
                                   "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/04. Fixing the Location Resource Leak.vtt"
                                   },
                                   {
                                   "name":" Improving Lifecycle Handling with Events",
                                   "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/05. Improving Lifecycle Handling with Events.mp4",
                                   "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/05. Improving Lifecycle Handling with Events.vtt"
                                   },
                                   {
                                   "name":" Creating a Lifecycle Observer",
                                   "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/06. Creating a Lifecycle Observer.mp4",
                                   "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/06. Creating a Lifecycle Observer.vtt"
                                   },
                                   {
                                   "name":" Observing Lifecycle Events",
                                   "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/07. Observing Lifecycle Events.mp4",
                                   "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/07. Observing Lifecycle Events.vtt"
                                   },
                                   {
                                   "name":" Connecting the Observer to the Lifecycle",
                                   "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/08. Connecting the Observer to the Lifecycle.mp4",
                                   "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/08. Connecting the Observer to the Lifecycle.vtt"
                                   },
                                   {
                                   "name":" Summary",
                                   "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/09. Summary.mp4",
                                   "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/09. Summary.vtt"
                                   }
                       ]
                       },
                       {
                       "chapter":"05. Determining Lifecycle State",
                       "videos":[
                                   {
                                   "name":" Introduction",
                                   "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/00. Introduction.mp4",
                                   "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/00. Introduction.vtt"
                                   },
                                   {
                                   "name":" Events Are Only Part of the Story",
                                   "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/01. Events Are Only Part of the Story.mp4",
                                   "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/01. Events Are Only Part of the Story.vtt"
                                   },
                                   {
                                   "name":" Adding the Messaging Manager",
                                   "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/02. Adding the Messaging Manager.mp4",
                                   "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/02. Adding the Messaging Manager.vtt"
                                   },
                                   {
                                   "name":" Lifecycle-driven Asynchronous Operations",
                                   "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/03. Lifecycle-driven Asynchronous Operations.mp4",
                                   "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/03. Lifecycle-driven Asynchronous Operations.vtt"
                                   },
                                   {
                                   "name":" We're Leaking Connections",
                                   "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/04. We're Leaking Connections.mp4",
                                   "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/04. We're Leaking Connections.vtt"
                                   },
                                   {
                                   "name":" Lifecycle State",
                                   "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/05. Lifecycle State.mp4",
                                   "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/05. Lifecycle State.vtt"
                                   },
                                   {
                                   "name":" Verifying State in Asynchronous Operations",
                                   "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/06. Verifying State in Asynchronous Operations.mp4",
                                   "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/06. Verifying State in Asynchronous Operations.vtt"
                                   },
                                   {
                                   "name":" The Leak Is Fixed",
                                   "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/07. The Leak Is Fixed.mp4",
                                   "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/07. The Leak Is Fixed.vtt"
                                   },
                                   {
                                   "name":" Summary",
                                   "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/08. Summary.mp4",
                                   "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/08. Summary.vtt"
                                   }
                       ]
                       }
     ]
   }
 ]
}

PD: El archivo JSON tiene 5 cursos y cada uno sus capitulos y videos correspondientes, realmente seria un archivo muy largo pero subo un ejemplo de esos para poder entender como podria resolverlo con dos cursos.
CODIGO AJAX
Código (javascript) [Seleccionar]

let nombreCursos, cantidadCursos, i, datos, datosRecibidos, cantidadCapitulos;
let cantidadVideos, texto, texto2;
const xhttp = new XMLHttpRequest();
xhttp.open('GET', 'js/provider.json', true);
xhttp.send();
xhttp.onreadystatechange = function(response){
   if(this.readyState == 4 && this.status == 200){
       //console.log(this.responseText);
       datos = JSON.parse(this.responseText);
       if (xhttp.readyState==4 && xhttp.status==200) {
           datosRecibidos = datos.courses;
           for (i=0; i<datosRecibidos.length;i++) {
               cantidadCursos = [i];
               nombreCursos = datosRecibidos[i]['name'];
               cantidadCapitulos = datosRecibidos[i]['list'].length;
               cantidadVideos = datosRecibidos[i]['list'];
               texto = JSON.stringify(nombreCursos);
               texto2 = JSON.stringify(cantidadVideos);
               $("#videos").append("<tr><td>"+texto+"</td><td>"+texto2+"</td></tr>");
               
           }
       }
   }
}




PROBLEMA:
Si yo tengo un menu como el siguiente..

Yo requiero es que si le undo a Curso 1, el me muestre de manera ordenada en una tabla todos los capitulos de ese curso y sus videos, de la siguiente manera.



Si yo le undo a Curso 2, el va a ocultar el curso 1 y los demas y solo dejara visible el curso seleccionado.
Realmente no estoy pidiendo que me den todas las respuestas al problema, si no que me ayuden a entender como podria resolverlo, o que temas podrian servirme para poder entender bien como poder hacerlo, estoy aprendiendo y todo lo que me sirva a mi aprendizaje es bueno.

PD: No se si me estoy enredando o la respuesta puede estar en lo que ya hice con el for, pero realmente no he entendido bien como poder resolver esa ultima parte, Gracias a aquel que me pueda colaborar.

EdePC

Saludos,

- El detalle es ir creando, modificando y agregando datos a una <table> en memoria, luego vacías tu #videos y agregas dicha tabla. Revisa el siguiente ejemplo, lo cuelgo en jsBin completo, funcional y en vivo: https://jsbin.com/gejiqalisi/edit?html,output

Parte resaltante:
Código (javascript) [Seleccionar]
<button onclick="mostrarCurso(0)">Curso 1</button>
<button onclick="mostrarCurso(1)">Curso 2</button>
<div id="video"></div>

<script>
  const mostrarCurso = (i) => {
    const divVideo = document.getElementById('video')
    const table = document.createElement('table')
    const tbody = document.createElement('tbody')
    table.innerHTML = `<thead><tr><th colspan="2">${datos.courses[i].name}</th></tr></thead>`
    table.append(tbody)
    for (const capitulo of datos.courses[i].list) {
      let rowspan = capitulo.videos.length // Cantidad de filas que ocupa un capítulo
      for (const video of capitulo.videos) {
        const tr = document.createElement('tr')
        tbody.append(tr)
        if (rowspan) {
          tr.innerHTML = `<td rowspan="${rowspan}">${capitulo.chapter}</td><td>${video.name}</td>`
          rowspan = 0
        } else {
          tr.innerHTML = `<td>${video.name}</td>`
        }
      }
    }
    divVideo.innerHTML = '' // Vacía el DIV
    divVideo.append(table)  // Llena el DIV
  }


- Veo que estás utilizan JS6 así que no creo que tengas problemas en distingues las Arrow Functions ni las String con BackTicks :xD

Victor26

Muchas gracias, he utilizado la opcion que me distes, lo organize a lo que necesitaba y ya me esta dando!.