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"}
]
}
`