Soy nuevo y necesitaría ayuda para continuar con mi código. Quiero poder escribir un título de película desde la API y luego filtrarlo, y solo mostrar los resultados relacionados después de ingresar algún texto. ¿Alguien me puede ayudar? Este es mi código.
const films = document.getElementById('films'); const searchBar = document.getElementById('searchBar'); let StarwarsFilms = []; searchBar.addEventListener('keyup', (e) => { const searchString = e.target.value.toLowerCase(); const filteredTitel = StarwarsFilms.filter((title) => { return ( title.toLowerCase().includes(searchString) ); }); displaytitle(filteredTitel); }); const loadTitle = async () => { try { const res = await fetch('https://swapi.dev/api/films/'); StarwarsFilms = await res.json(); displaytitle(StarwarsFilms); } catch (err) { console.error(err); } }; const displaytitle = (title) => { const htmlString = title .map((results) => { return ` <li class="title"> <h2>${results.title}</h2> </li> `; }) .join(''); films.innerHTML = htmlString; }; loadTitle(); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Star Wars</title> </head> <body> <div class="container"> <h1>Search</h1> <div id="searchWrapper"> <input type="text" name="searchBar" id="searchBar" placeholder="search for a character" /> </div> <ul id="films"></ul> <ul id="starwarstitle"></ul> </div> <script src="starwars.js"></script> </body> </html>En loadTitle :
StarwarsFilms = await res.json();devuelve un objeto que se parece a
{count: 6, next: null, previous: null, results: [/*details omitted*/]}Supongo que quería encontrar los resultados de la búsqueda, por lo que debería ser:
StarwarsFilms = (await res.json()).results; A continuación, en el oyente keyup para searchBar :
title.toLowerCase().includes(searchString) Aquí, el title es en realidad un objeto de "película" (que incluye muchas claves), no la cadena de título en sí, por lo que desea:
title.title.toLowerCase().includes(searchString)Código final (con algunos cambios de nombre de variables para mayor claridad):
const films = document.getElementById('films'); const searchBar = document.getElementById('searchBar'); let starWarsFilms = []; searchBar.addEventListener('keyup', (e) => { const searchString = e.target.value.toLowerCase(); const filteredFilms = starWarsFilms.filter((film) => { return ( film.title.toLowerCase().includes(searchString) ); }); displayTitles(filteredFilms); }); const loadTitle = async () => { try { const res = await fetch('https://swapi.dev/api/films/'); starWarsFilms = (await res.json()).results; displayTitles(starWarsFilms); } catch (err) { console.error(err); } }; const displayTitles = (results) => { const htmlString = results .map((film) => { return ` <li class="title"> <h2>${film.title}</h2> </li> `; }) .join(''); films.innerHTML = htmlString; }; loadTitle(); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Star Wars</title> </head> <body> <div class="container"> <h1>Search</h1> <div id="searchWrapper"> <input type="text" name="searchBar" id="searchBar" placeholder="search for a character" /> </div> <ul id="films"></ul> <ul id="starwarstitle"></ul> </div> <script src="starwars.js"></script> </body> </html>