1

me ocupa la siguiente function de javascript

function videos(a){

  var videos = [{
          nombre: "Video 1",
          ruta: "media/videos/Bienvenida/",
          archivo: "presentacion.mp4",
          seccion: 1
      },{
          nombre: "Video 2",
          ruta: "media/videos/Bienvenida/",
          archivo: "origenes.mp4",
          seccion: 2
          }

    ];

resultado = "<h1>Prueba de Lista de Videos</h1>";
resultado += "<ul>";
      for (key in videos) {
          var nombre = videos[key];
          var ruta = videos[key];
          var archivo = videos[key];
          var seccion = videos[key];
          var listaNombre = nombre.nombre;
          var listaRuta = ruta.ruta;
          var listaArchivo = archivo.archivo;
          var listaSeccion = seccion.seccion;
          var listaA = listaNombre.toUpperCase();
          var listaB = "<a title='Visitar " + listaNombre + "' class='clase6' href='" + listaRuta + listaArchivo + "' target = '_blank'>" + listaRuta + "</a>";
          // Genera el contenido que va a html contenido
          resultado += "<li>" + listaA + "<br>" + listaB + "<br>" + listaArchivo + "<br><br></li>";
        }
resultado += "</ul>";

  document.getElementById('contenido').innerHTML = resultado;

}

Asi como esta funciona mostrando los 2 videos del ejemplo pero lo que deseo hacer es que si es llamada la function videos(1) entonces se cargue solo el video 1 y si llamo function videos(2) se muestre el video 2 es decir que en numero de la function videos(a) a sea la seccion.

3
  • ¿Cómo se va a llamar a esta función?, ¿Con un botón? Saludos
    – g.4
    Commented el 31 ago. 2020 a las 2:24
  • Saludos la idea es llamarla de la siguiente manera desde un boton onclick='videos(1);' o onclick='videos(2);' Commented el 31 ago. 2020 a las 2:26
  • Saludos si la idea de que este dentro de un Array es porque es mas ordenado tener tantos archivos Commented el 31 ago. 2020 a las 3:26

4 respuestas 4

1

Por favor prueba la siguiente solución, estoy asumiendo que la estructura de tu conjunto de datos es similar a lo que propongo:

function videos(a){

        let videos = [{
            nombre: "Video 1",
            ruta: "media/videos/Bienvenida/",
            archivo: "presentacion.mp4",
            seccion: 1
        },
        {
            nombre: "Video 2",
            ruta: "media/videos/Bienvenida/",
            archivo: "origenes.mp4",
            seccion: 2
        },
        {
            nombre: "Video 2 -1",
            ruta: "media/videos/Bienvenida/",
            archivo: "origenes.mp4",
            seccion: 2
        },
        {
            nombre: "Video 2 -2 ",
            ruta: "media/videos/Bienvenida/",
            archivo: "origenes.mp4",
            seccion: 2
        }
    ];

    let selectedVideo = videos.filter((item) => (
        item.seccion === a
    ));
    
    let resultado = "<h1>Prueba de Lista de Videos</h1>";
    let nodoDOM = selectedVideo.map((video) => {
        resultado += "<ul>";
        let nombre = video.nombre;
        let ruta = video.ruta;
        let archivo = video.archivo;
        let seccion = video.seccion;
        let listaA = nombre.toUpperCase();
        let listaB = "<a title='Visitar " + nombre + "' class='clase6' href='" + ruta + archivo + "' target = '_blank'>" + ruta + "</a>";
        // Genera el contenido que va a html contenido
        resultado += "<li>" + listaA + "<br>" + listaB + "<br>" + archivo + "<br><br></li>";
        resultado += "</ul>";

        return resultado;
    });

    nodoDOM.map((item) => (document.getElementById('contenido').innerHTML = item));
    //document.getElementById('contenido').innerHTML = nodoDOM;  
  }

Si funciona, te sugiero un refactor en la forma en que pintas los elementos DOM, innerHTML no es recomendado, necesitas implementar createElement e insertAdjacentElement para pintar esos elementos.

Por favor actualiza la respuesta que vayas a elegir.

2
  • Lo implemente de manera perfecta, y si me pondré en ello, no había refactorizado porque este es un aplicativo que funciona offline pero tomare su sugerencia y mejorare mi forma de codificar..! Gracias Commented el 31 ago. 2020 a las 4:32
  • 1
    Claro, le sugiero usar ReactJS, es mas práctico trabajar con virtual DOM que con DOM, Saludos.
    – g.4
    Commented el 31 ago. 2020 a las 4:35
0

Si tienes el array ordenado la posicion del array es el numero que le envías menos 1, y no es necesario declararlo cada vez que hagas click, en este ejemplo lo puse afuera de la función.

var arrvideos = [{
 nombre: "Video 1",
 ruta: "media/videos/Bienvenida/",
 archivo: "presentacion.mp4",
 seccion: 1
 },{
 nombre: "Video 2",
 ruta: "media/videos/Bienvenida/",
 archivo: "origenes.mp4",
 seccion: 2
 }

 ];

function videos(a){
resultado = "<h1>Prueba de Lista de Videos</h1>";
resultado += "<ul>";

 var xvideo = arrvideos[a-1];
 var listaNombre = xvideo.nombre;
 var listaRuta = xvideo.ruta;
 var listaArchivo = xvideo.archivo;
 var listaSeccion = xvideo.seccion;
 var listaA = listaNombre.toUpperCase();
 var listaB = "<a title='Visitar " + listaNombre + "' class='clase6' href='" + listaRuta + listaArchivo + "' target = '_blank'>" + listaRuta + "</a>";
 // Genera el contenido que va a html contenido
 resultado += "<li>" + listaA + "<br>" + listaB + "<br>" + listaArchivo + "<br><br></li>";
 resultado += "</ul>";

 document.getElementById('contenido').innerHTML = resultado;

}

videos("2");
<div id="contenido"></div>

1
  • Gracias y ahora si comprendo como funciona, de hecho la solucion anterior si me es mas efectivo ya que en mi caso tengo como 60 videos de los cuales 3 son de la seccion 1 los otros 5 son de la seccion 2 y asi varia la cantidad y la seccion de origen del video. Pero tu sugerencia la marque como valida porque en efecto como la explicas funcionaria de forma automatica con la posicion del array Commented el 31 ago. 2020 a las 3:00
0

Si vas a seguir buscando por numeros podes usar el index. Simplemente lo restas con uno y listo. VIDEOS[busqueda-1]

Ejecuta y fijate en el ejemplo. En los comentarios del codigo hay mas explicacion.

const VIDEOS = [
  {
    nombre: "Video 1",
    ruta: "media/videos/Bienvenida/",
    archivo: "presentacion.mp4",
    seccion: 1
  },
  {
    nombre: "Video 2",
    ruta: "media/videos/Bienvenida/",
    archivo: "origenes.mp4",
    seccion: 2
  }
]
function getDivContenido(){
  return document.getElementById('contenido')
}

function addTitle(title){
    let h1Element = document.createElement('h1')
  h1Element.classList.add("title")
    getDivContenido().appendChild(h1Element).innerText = title
}

function createUlTag(){
    let ulTag = document.createElement('ul')
  ulTag.setAttribute("id", "ul-list");
  getDivContenido().appendChild(ulTag)
}
function getUlElement(){
    return document.getElementById('ul-list')
}
function createLiTag(){
    let liTag = document.createElement('li')
  return liTag
}

function getVideo(busqueda){
    //controlamos que el valor de busqueda este entre el rango del lenght deL array VIDEOS.
    if ((busqueda-1) >= VIDEOS.length || busqueda <= 0 ) {
      window.alert("No hay video con ese indice")
    }else{
      //Aqui en vez de utilizar alguna funcion para iterar por el array simplemente utilizo el index
      //nosotros los informaticos sabemos que en progamacion se empeza a contar de 0
      //entonces lo que hago es agarrar numero del video que queres buscar y lo resto con 1
      // ejemplo queres el video 2
      //busqueda = 2
      //VIDEOS[busqueda-1] agarra el objeto que esta en la posicion 1.

      // esta linea esta destructurando el objeto y lo asigna a las respectivas variables
      //las variables serian archivoVideo, nombreVideos y asi sucesivamente.
      let {archivo: archivoVideo, nombre: nombreVideo, ruta: rutaVideo, seccion: seccionVideo} = VIDEOS[busqueda-1]

      let liArchivo = createLiTag()
      liArchivo.innerText = archivoVideo
      getUlElement().appendChild(liArchivo)

      let liNombre = createLiTag()
      liNombre.innerText = nombreVideo
      getUlElement().appendChild(liNombre)

      let liRuta = createLiTag()
      liRuta.innerText = rutaVideo
      getUlElement().appendChild(liRuta)  

      let liSeccion = createLiTag()
      liSeccion.innerText = seccionVideo
      getUlElement().appendChild(liSeccion)  
    }  
}

//invocamos las funciones
addTitle('Lista de Videos')
createUlTag()
getVideo(2)
getVideo(1)
getVideo(0)
getVideo(-4)
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
  </head>
  <body>
  <section class="section">
    <div class="container" id="contenido"></div>
  </section>
  </body>
</html>

Saludos!

0

Lo que yo haría sería recorrer cada objeto del array de vídeos y cuando el atributo seccion del objeto sea el que le pasamos como parámetro de entrada a la función, almacenar dicho objeto en una variable. De esa manera ya podemos acceder directamente a los atributos del objeto correcto y pintar la cadena que necesitas devolver en la variable resultado.

console.log(videos(2));

function videos(a) {
    let videos = [{
          nombre: "Video 1",
          ruta: "media/videos/Bienvenida/",
          archivo: "presentacion.mp4",
          seccion: 1
      },
      {
          nombre: "Video 2",
          ruta: "media/videos/Bienvenida/",
          archivo: "origenes.mp4",
          seccion: 2
      },
      {
          nombre: "Video 3",
          ruta: "media/videos/Bienvenida/",
          archivo: "origenes.mp4",
          seccion: 2
      }
    ];
   
   let resultado = '';
   
  videos.forEach(function(video) {
    if (video.seccion === a) {
      resultado += "<h1>Prueba de Lista de Videos</h1>";
      resultado += "<ul>";
      let nombre = video.nombre;
      let ruta = video.ruta;
      let archivo = video.archivo;
      let seccion = video.seccion;
      let listaA = nombre.toUpperCase();
      let listaB = "<a title='Visitar " + nombre + "' class='clase6' href='" + ruta + archivo + "' target = '_blank'>" + ruta + "</a>";
      // Genera el contenido que va a html contenido
      resultado += "<li>" + listaA + "<br>" + listaB + "<br>" + archivo + "<br><br></li>";
      resultado += "</ul>";
    }
  });
    

    return resultado;
}

3
  • He probado tu solucion y si tengo un solo video en la seccion no hay problema pero pero si tengo ejemplo 4 videos en la seccion 2 solo muestra el ultimo archivo Commented el 31 ago. 2020 a las 3:27
  • Esta respuesta cumple con lo que mencionas si insertas el html del video dentro del if donde compara la seccion. Como esta aparte solo te deja el ultimo resultado.
    – Ange Reyna
    Commented el 31 ago. 2020 a las 4:32
  • En mi cabeza pensé que solamente podía pintarse un solo vídeo. Actualicé la respuesta para incluir en el bucle forEach la asignación de valor de resultado para que de esa manera se vaya añadiendo a la variable acumulativa todos los vídeos que cumplan con el patrón de selección.
    – phpMyGuel
    Commented el 31 ago. 2020 a las 9:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.