0

estoy intentando a traves de una funcion poder filtrar las peliculas que dinamicamente estoy cargando desde un json. en una primera funcion con en el evento domcontenloaded cargo las peliculas y en la segunda funcion no sabria como acceder a los valores de ese json y poder filtrar a traves del nombre. Como podria acceder a los valores del json desde esa otra funcion? mandandole el valor como parametro?

` app.js
const cargarPeliculas = () =>{

    let mostrar = document.getElementById("mostrar")


    fetch("../json/pelicula.json")
    .then((res)=> res.json())
    .then((data)=>{



        let html = ""
        let info = data.peliculas

        info.forEach((dato)=>{
            html += `           
            <div class="card m-5 p-3" style="width: 15rem;">
              <img src="${dato.img}" class="card-img-top" alt="...">
              <div class="card-body">
                <h5 class="card-title">${dato.nombre}</h5>
                <p class="card-text">${dato.descripcion}</p>
                <a href="${dato.trailer}" target="_blank" class="btn btn- 
    primary">Trailer de la pelicula en youtube</a>
              </div>
            </div>
          `
        })
mostrar.innerHTML = html
  })
    .catch((error)=>{
       console.log(error)
})
}

document.addEventListener("DOMContentLoaded", cargarPeliculas)


const valueInput = document.getElementById("pelicula");


const encontrarPelicula = (e)=>{
    const valorInput = e.target.value

  // let filtrar =  pelicula.filter((valor)=>{

        //return valor.nombre = valorInput




    //})






}

valueInput.addEventListener("keyup", encontrarPelicula)

-------------------------------------------------
 pelicula.json

         {
"peliculas":[
    {"nombre" : "Harry potter y las reliquias de la muerte parte 2", 
 "descripcion": "Pelicula final de la exitosa saga de harry potter", "img" : "../img/harryPotter7.jpg", "trailer": "https://www.youtube.com/watch?v=I8KCaGH780w"},
    {"nombre" : "Rapido y furioso 9", "descripcion": "Vin diesel vuelve a la  carga...", "img" : "../img/rapidoFurioso9.jpeg", "trailer": "https://www.youtube.com/watch?v=SG_dim5MblE"},
    {"nombre" : "El joker", "descripcion": "El terror ha ciudad gotica ha llegado...", "img" : "../img/joker.jpg", "trailer":"https://www.youtube.com/watch?v=UVPkb6WEBV0"}   
]

}

`

6
  • Hola se me ocurre que uses el metodo includes, con el valor que tenga el input, obtienes el valor despues puedes hacer un filter al array de peliculas y buscar por la llave por ejemplo peliculas.filter ( data => data.nombre.toLowerCase().includes("Aqui va donde hayas guardado el valor de tu input para que se busque ese valor en el array"); Commented el 22 nov. 2019 a las 18:09
  • hola alexis, lo que no estaria entendiendo como hacer es la parte de acceder al valor del array de peliculas(el json) desde ese funcion. la implementacion del metodo filter creo poder hacerla. Commented el 22 nov. 2019 a las 18:13
  • al momento que haces el filter esta accediendo a los valores de todo el array, lo esta recorriendo. Commented el 22 nov. 2019 a las 18:14
  • ok, podrias ser tan amable de en base al codigo que tengo decirme literal como hacer la parte de filtrar la pelicula? Commented el 22 nov. 2019 a las 18:18
  • Observa estos ejemplos. freecodecamp.org/forum/t/… Commented el 22 nov. 2019 a las 18:21

1 respuesta 1

1

Para poder acceder a los valores del array desde la función, lo mas sencillo es que declares la variable de manera global y la vayas modificando, esto no suele ser muy buena practica, asi que algo mas seguro seria declarar la variable en un scope y dentro del mismo añadir el evento, asi siempre hara referencia a la función:


const cargarPeliculas = () => {

  const valueInput = document.getElementById("pelicula");

  let peliculas = []

  fetch("../json/pelicula.json")
  .then((res)=> res.json())
  .then((data)=>{

        peliculas = data.data.peliculas

    mostrarPeliculas(peliculas)

  })
  .catch((error)=>{
    console.log(error)
  }) 

  const encontrarPelicula = (e) => {

        const valorInput = e.target.value.toLowerCase()

            const arrayPeliculas = peliculas.filter(p => {

        return p.nombre.toLowerCase().indexOf(valorInput) > -1

      })

      mostrarPeliculas(arrayPeliculas)

    }

  valueInput.addEventListener("keyup", encontrarPelicula)

}

document.addEventListener("DOMContentLoaded", cargarPeliculas)

const mostrarPeliculas = (peliculas) => {

  const mostrar = document.getElementById("mostrar");

  let html = ""

  peliculas.forEach((dato)=>{
    html += `           
      <div class="card m-5 p-3" style="width: 15rem;">
      <img src="${dato.img}" class="card-img-top" alt="...">
      <div class="card-body">
      <h5 class="card-title">${dato.nombre}</h5>
      <p class="card-text">${dato.descripcion}</p>
      <a href="${dato.trailer}" target="_blank" class="btn btn- 
      primary">Trailer de la pelicula en youtube</a>
      </div>
      </div>
        `
  })

  mostrar.innerHTML = html

}

4
  • uff, tremendo aporte, muchas gracias!! Commented el 22 nov. 2019 a las 19:11
  • otra consulta, como podria hacer para cuando no encuentra una pelicula me muestre un mensaje diciendo "no se ha encontrado la pelicula"? Commented el 22 nov. 2019 a las 19:31
  • 1
    Utiliza if (peliculas.length > 0) en la función "mostrarPeliculas". Si no simplemente cambia let html = "" por let html = peliculas.length > 0 ? "" : "No se han encontrado la pelicula" Commented el 22 nov. 2019 a las 20:09
  • muchas gracias crack!! Commented el 22 nov. 2019 a las 21:01

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.