elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.


Tema destacado: Recuerda que debes registrarte en el foro para poder participar (preguntar y responder)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Pregunta]Problema con HTML, Json y Ajax		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [Pregunta]Problema con HTML, Json y Ajax  (Leído 2,467 veces)
Victor26

Desconectado Desconectado

Mensajes: 26


Ver Perfil
[Pregunta]Problema con HTML, Json y Ajax
« en: 31 Mayo 2020, 04:19 am »
 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
  1. {
  2.   "courses": [
  3.   	{
  4.       "name": "Programming - Android Leveraging the power of the android platform", 
  5.       "color": "#BCCEF4",
  6.       "list":
  7.       [
  8.       	{
  9. 		"chapter":"Leveraging the power of the android platform",
  10. 		"videos":[ 
  11. 		            { 
  12. 		            "name":" Understanding the android threading model",
  13. 		            "video":"programming/Android/Leveraging the power of the android platform/1. Understanding the android threading model.mkv",
  14. 		            "subtitle":"file.vtt"
  15. 		             },
  16. 		            { 
  17. 		            "name":" Performing Background work with Services",
  18. 		            "video":"programming/Android/Leveraging the power of the android platform/2. Performing Background work with Services.mkv",
  19. 		            "subtitle":"file.vtt"
  20. 		            },
  21. 		            { 
  22. 		            "name":" Scheduling Background work with jobScheduler",
  23. 		            "video":"programming/Android/Leveraging the power of the android platform/3. Scheduling Background work with jobScheduler.mkv",
  24. 		            "subtitle":"file.vtt"
  25. 		            },
  26. 		            { 
  27. 		            "name":" working with Broadcast Receivers",
  28. 		            "video":"programming/Android/Leveraging the power of the android platform/4. working with Broadcast Receivers.mkv",
  29. 		            "subtitle":"file.vtt"
  30. 		            },
  31. 		            { 
  32. 		            "name":" Using Alarms to shedule time-sensitive task",
  33. 		            "video":"programming/Android/Leveraging the power of the android platform/5. Using Alarms to shedule time-sensitive task.mkv",
  34. 		            "subtitle":"file.vtt"
  35. 		            }
  36. 		        ]
  37. 		}
  38.  
  39.       ]
  40.     },
  41.     {
  42.       "name": "Programming - Android Apps with Kotlin- ViewModel and Lifecycle", 
  43.       "color": "#BCCEF4",
  44.       "list":
  45.       [
  46.           {
  47.             "chapter":"00. Course Overview",
  48.             "videos":[ 
  49.                 { 
  50.                 "name":" Course Overview",
  51.                 "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/00. Course Overview/00. Course Overview.mp4",
  52.                 "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/00. Course Overview/00. Course Overview.vtt"
  53.                 }
  54.             ]
  55.            },
  56.            {
  57.             "chapter":"01. Managing Activity State with ViewModel",
  58.             "videos":[ 
  59.                         { 
  60.                         "name":" Introduction",
  61.                         "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/00. Introduction.mp4",
  62.                         "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/00. Introduction.vtt"
  63.                         },
  64.                         { 
  65.                         "name":" Activities - More Than Just a Pretty Face",
  66.                         "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",
  67.                         "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"
  68.                         },
  69.                         { 
  70.                         "name":" Managing Activity State with ViewModel",
  71.                         "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/02. Managing Activity State with ViewModel.mp4",
  72.                         "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/02. Managing Activity State with ViewModel.vtt"
  73.                         },
  74.                         { 
  75.                         "name":" There's a Bug in Our App",
  76.                         "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",
  77.                         "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"
  78.                         },
  79.                         { 
  80.                         "name":" Adding a ViewModel and Build Dependencies",
  81.                         "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/04. Adding a ViewModel and Build Dependencies.mp4",
  82.                         "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/04. Adding a ViewModel and Build Dependencies.vtt"
  83.                         },
  84.                         { 
  85.                         "name":" Accessing Our ViewModel with a Lazy Property",
  86.                         "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",
  87.                         "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"
  88.                         },
  89.                         { 
  90.                         "name":" Restoring the Activity State",
  91.                         "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/06. Restoring the Activity State.mp4",
  92.                         "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/06. Restoring the Activity State.vtt"
  93.                         },
  94.                         { 
  95.                         "name":" That Bug's Fixed, but We Just Found Another One",
  96.                         "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",
  97.                         "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"
  98.                         },
  99.                         { 
  100.                         "name":" Managing More Complex State with ViewModel",
  101.                         "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/08. Managing More Complex State with ViewModel.mp4",
  102.                         "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/08. Managing More Complex State with ViewModel.vtt"
  103.                         },
  104.                         { 
  105.                         "name":" Verifying App Behavior",
  106.                         "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/09. Verifying App Behavior.mp4",
  107.                         "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/09. Verifying App Behavior.vtt"
  108.                         },
  109.                         { 
  110.                         "name":" Summary",
  111.                         "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/10. Summary.mp4",
  112.                         "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/01. Managing Activity State with ViewModel/10. Summary.vtt"
  113.                         }
  114.             ]
  115.             },
  116.             {
  117.                 "chapter":"02. Maintaining Activity State during System-initiated Shutdowns",
  118.                 "videos":[ 
  119.                             { 
  120.                             "name":" Introduction",
  121.                             "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/02. Maintaining Activity State during System-initiated Shutdowns/00. Introduction.mp4",
  122.                             "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/02. Maintaining Activity State during System-initiated Shutdowns/00. Introduction.vtt"
  123.                             },
  124.                             { 
  125.                             "name":" Activity Destruction Effects on State",
  126.                             "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",
  127.                             "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"
  128.                             },
  129.                             { 
  130.                             "name":" Durable Activity State",
  131.                             "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/02. Maintaining Activity State during System-initiated Shutdowns/02. Durable Activity State.mp4",
  132.                             "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/02. Maintaining Activity State during System-initiated Shutdowns/02. Durable Activity State.vtt"
  133.                             },
  134.                             { 
  135.                             "name":" Identifying the Need for Durable State",
  136.                             "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",
  137.                             "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"
  138.                             },
  139.                             { 
  140.                             "name":" Persisting State of a Simple Value",
  141.                             "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",
  142.                             "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"
  143.                             },
  144.                             { 
  145.                             "name":" Restoring State of a Simple Value",
  146.                             "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",
  147.                             "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"
  148.                             },
  149.                             { 
  150.                             "name":" Summary",
  151.                             "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/02. Maintaining Activity State during System-initiated Shutdowns/06. Summary.mp4",
  152.                             "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/02. Maintaining Activity State during System-initiated Shutdowns/06. Summary.vtt"
  153.                             }
  154.                 ]
  155.                 },
  156.                 {
  157.                     "chapter":"03. Persisting Complex Activity State",
  158.                     "videos":[ 
  159.                                 { 
  160.                                 "name":" Introduction",
  161.                                 "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/03. Persisting Complex Activity State/00. Introduction.mp4",
  162.                                 "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/03. Persisting Complex Activity State/00. Introduction.vtt"
  163.                                 },
  164.                                 { 
  165.                                 "name":" We're Still Losing Some of Our Activity State",
  166.                                 "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",
  167.                                 "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"
  168.                                 },
  169.                                 { 
  170.                                 "name":" Activity State and Data Model Cooperation",
  171.                                 "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/03. Persisting Complex Activity State/02. Activity State and Data Model Cooperation.mp4",
  172.                                 "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/03. Persisting Complex Activity State/02. Activity State and Data Model Cooperation.vtt"
  173.                                 },
  174.                                 { 
  175.                                 "name":" Moving the Details to the ViewModel",
  176.                                 "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/03. Persisting Complex Activity State/03. Moving the Details to the ViewModel.mp4",
  177.                                 "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/03. Persisting Complex Activity State/03. Moving the Details to the ViewModel.vtt"
  178.                                 },
  179.                                 { 
  180.                                 "name":" Persisting State of an Object Graph",
  181.                                 "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/03. Persisting Complex Activity State/04. Persisting State of an Object Graph.mp4",
  182.                                 "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/03. Persisting Complex Activity State/04. Persisting State of an Object Graph.vtt"
  183.                                 },
  184.                                 { 
  185.                                 "name":" Effectively Using ViewModel and Durable State Together",
  186.                                 "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/03. Persisting Complex Activity State/05. Effectively Using ViewModel and Durable State Together.mp4",
  187.                                 "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/03. Persisting Complex Activity State/05. Effectively Using ViewModel and Durable State Together.vtt"
  188.                                 },
  189.                                 { 
  190.                                 "name":" Verifying State Management Behavior",
  191.                                 "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/03. Persisting Complex Activity State/06. Verifying State Management Behavior.mp4",
  192.                                 "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/03. Persisting Complex Activity State/06. Verifying State Management Behavior.vtt"
  193.                                 },
  194.                                 { 
  195.                                 "name":" Summary",
  196.                                 "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/03. Persisting Complex Activity State/07. Summary.mp4",
  197.                                 "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/03. Persisting Complex Activity State/07. Summary.vtt"
  198.                                 }
  199.                     ]
  200.                     },
  201.                     {
  202.                         "chapter":"04. Subscribing to Lifecycle Events",
  203.                         "videos":[ 
  204.                                     { 
  205.                                     "name":" Introduction",
  206.                                     "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/00. Introduction.mp4",
  207.                                     "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/00. Introduction.vtt"
  208.                                     },
  209.                                     { 
  210.                                     "name":" Cooperating with Activity Lifecycle",
  211.                                     "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/01. Cooperating with Activity Lifecycle.mp4",
  212.                                     "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/01. Cooperating with Activity Lifecycle.vtt"
  213.                                     },
  214.                                     { 
  215.                                     "name":" Our App's Get-together Feature",
  216.                                     "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/02. Our App's Get-together Feature.mp4",
  217.                                     "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/02. Our App's Get-together Feature.vtt"
  218.                                     },
  219.                                     { 
  220.                                     "name":" Managing Location with Activity Functions",
  221.                                     "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/03. Managing Location with Activity Functions.mp4",
  222.                                     "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/03. Managing Location with Activity Functions.vtt"
  223.                                     },
  224.                                     { 
  225.                                     "name":" Fixing the Location Resource Leak",
  226.                                     "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/04. Fixing the Location Resource Leak.mp4",
  227.                                     "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/04. Fixing the Location Resource Leak.vtt"
  228.                                     },
  229.                                     { 
  230.                                     "name":" Improving Lifecycle Handling with Events",
  231.                                     "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/05. Improving Lifecycle Handling with Events.mp4",
  232.                                     "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/05. Improving Lifecycle Handling with Events.vtt"
  233.                                     },
  234.                                     { 
  235.                                     "name":" Creating a Lifecycle Observer",
  236.                                     "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/06. Creating a Lifecycle Observer.mp4",
  237.                                     "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/06. Creating a Lifecycle Observer.vtt"
  238.                                     },
  239.                                     { 
  240.                                     "name":" Observing Lifecycle Events",
  241.                                     "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/07. Observing Lifecycle Events.mp4",
  242.                                     "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/07. Observing Lifecycle Events.vtt"
  243.                                     },
  244.                                     { 
  245.                                     "name":" Connecting the Observer to the Lifecycle",
  246.                                     "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/08. Connecting the Observer to the Lifecycle.mp4",
  247.                                     "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/08. Connecting the Observer to the Lifecycle.vtt"
  248.                                     },
  249.                                     { 
  250.                                     "name":" Summary",
  251.                                     "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/09. Summary.mp4",
  252.                                     "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/04. Subscribing to Lifecycle Events/09. Summary.vtt"
  253.                                     }
  254.                         ]
  255.                         },
  256.                         {
  257.                         "chapter":"05. Determining Lifecycle State",
  258.                         "videos":[ 
  259.                                     { 
  260.                                     "name":" Introduction",
  261.                                     "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/00. Introduction.mp4",
  262.                                     "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/00. Introduction.vtt"
  263.                                     },
  264.                                     { 
  265.                                     "name":" Events Are Only Part of the Story",
  266.                                     "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/01. Events Are Only Part of the Story.mp4",
  267.                                     "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/01. Events Are Only Part of the Story.vtt"
  268.                                     },
  269.                                     { 
  270.                                     "name":" Adding the Messaging Manager",
  271.                                     "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/02. Adding the Messaging Manager.mp4",
  272.                                     "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/02. Adding the Messaging Manager.vtt"
  273.                                     },
  274.                                     { 
  275.                                     "name":" Lifecycle-driven Asynchronous Operations",
  276.                                     "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/03. Lifecycle-driven Asynchronous Operations.mp4",
  277.                                     "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/03. Lifecycle-driven Asynchronous Operations.vtt"
  278.                                     },
  279.                                     { 
  280.                                     "name":" We're Leaking Connections",
  281.                                     "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/04. We're Leaking Connections.mp4",
  282.                                     "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/04. We're Leaking Connections.vtt"
  283.                                     },
  284.                                     { 
  285.                                     "name":" Lifecycle State",
  286.                                     "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/05. Lifecycle State.mp4",
  287.                                     "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/05. Lifecycle State.vtt"
  288.                                     },
  289.                                     { 
  290.                                     "name":" Verifying State in Asynchronous Operations",
  291.                                     "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/06. Verifying State in Asynchronous Operations.mp4",
  292.                                     "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/06. Verifying State in Asynchronous Operations.vtt"
  293.                                     },
  294.                                     { 
  295.                                     "name":" The Leak Is Fixed",
  296.                                     "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/07. The Leak Is Fixed.mp4",
  297.                                     "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/07. The Leak Is Fixed.vtt"
  298.                                     },
  299.                                     { 
  300.                                     "name":" Summary",
  301.                                     "video":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/08. Summary.mp4",
  302.                                     "subtitle":"programming/Android/Android Apps with Kotlin- ViewModel and Lifecycle/05. Determining Lifecycle State/08. Summary.vtt"
  303.                                     }
  304.                         ]
  305.                         }
  306.       ]
  307.     }
  308.   ]
  309. }
  310.  
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
  1. let nombreCursos, cantidadCursos, i, datos, datosRecibidos, cantidadCapitulos;
  2. let cantidadVideos, texto, texto2;
  3. const xhttp = new XMLHttpRequest();
  4. xhttp.open('GET', 'js/provider.json', true);
  5. xhttp.send();
  6. xhttp.onreadystatechange = function(response){
  7.     if(this.readyState == 4 && this.status == 200){
  8.         //console.log(this.responseText);
  9.         datos = JSON.parse(this.responseText);
  10.         if (xhttp.readyState==4 && xhttp.status==200) {
  11.             datosRecibidos = datos.courses;
  12.             for (i=0; i<datosRecibidos.length;i++) {
  13.                 cantidadCursos = [i];
  14.                 nombreCursos = datosRecibidos[i]['name'];
  15.                 cantidadCapitulos = datosRecibidos[i]['list'].length;
  16.                 cantidadVideos = datosRecibidos[i]['list'];
  17.                 texto = JSON.stringify(nombreCursos);
  18.                 texto2 = JSON.stringify(cantidadVideos);
  19.                 $("#videos").append("<tr><td>"+texto+"</td><td>"+texto2+"</td></tr>");
  20.  
  21.             }
  22.         }
  23.     }
  24. }
  25.  
  26.  
  27.  

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.
« Última modificación: 1 Junio 2020, 17:24 pm por Victor26 » En línea
EdePC
Moderador Global
***
Desconectado Desconectado

Mensajes: 2.183



Ver Perfil
Re: [Pregunta]Problema con HTML, Json y Ajax
« Respuesta #1 en: 31 Mayo 2020, 07:32 am »
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
  1. <button onclick="mostrarCurso(0)">Curso 1</button>
  2. <button onclick="mostrarCurso(1)">Curso 2</button>
  3. <div id="video"></div>
  4.  
  5. <script>
  6.   const mostrarCurso = (i) => {
  7.     const divVideo = document.getElementById('video')
  8.     const table = document.createElement('table')
  9.     const tbody = document.createElement('tbody')
  10.     table.innerHTML = `<thead><tr><th colspan="2">${datos.courses[i].name}</th></tr></thead>`
  11.     table.append(tbody)
  12.     for (const capitulo of datos.courses[i].list) {
  13.       let rowspan = capitulo.videos.length // Cantidad de filas que ocupa un capítulo
  14.       for (const video of capitulo.videos) {
  15.         const tr = document.createElement('tr')
  16.         tbody.append(tr)
  17.         if (rowspan) {
  18.           tr.innerHTML = `<td rowspan="${rowspan}">${capitulo.chapter}</td><td>${video.name}</td>`
  19.           rowspan = 0
  20.         } else {
  21.           tr.innerHTML = `<td>${video.name}</td>`
  22.         }
  23.       }
  24.     }
  25.     divVideo.innerHTML = '' // Vacía el DIV
  26.     divVideo.append(table)  // Llena el DIV
  27.   }

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

Desconectado Desconectado

Mensajes: 26


Ver Perfil
Re: [Pregunta]Problema con HTML, Json y Ajax
« Respuesta #2 en: 1 Junio 2020, 17:23 pm »
Muchas gracias, he utilizado la opcion que me distes, lo organize a lo que necesitaba y ya me esta dando!.
En línea
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
[Resuelto] [Newbie] No puedo acceder a objeto JSON enviado por AJAX
PHP 		iGust4v0x 8 5,070 Último mensaje 14 Enero 2015, 21:46 pm
por iGust4v0x
Duda con Ruby on Rails (html y json)
Desarrollo Web 		clupin 1 2,041 Último mensaje 4 Junio 2016, 18:09 pm
por [u]nsigned
[Pregunta]: ¿Como puedo aplicar JSON a esto?
Desarrollo Web 		Leguim 2 2,714 Último mensaje 30 Noviembre 2019, 23:41 pm
por MinusFour
ajax y json
Scripting 		inma55 3 4,182 Último mensaje 14 Noviembre 2023, 06:59 am
por D3s0rd3n
Mastering javascript - OOP, Ajax, APIs, JSON, and Beyond
Tutoriales - Documentación 		ehn@ 0 1,079 Último mensaje 5 Diciembre 2023, 17:29 pm
por ehn@
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines