Question

0

117

Views

Javascript Search Bar with Star Wars API

I am new and would need help to get on with my code. I want to be able to write a movie title from the API and then filter it, and only show the related results after input some text. Can someone help me? This is my code.

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>

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-03T14:29:00.718Z

In loadTitle:

StarwarsFilms = await res.json();

returns an object that looks like

{count: 6, next: null, previous: null, results: [/*details omitted*/]}

I presume you wanted to find the results of the search, so it should be:

StarwarsFilms = (await res.json()).results;

Next, in the keyup listener for searchBar:

title.toLowerCase().includes(searchString)

Here, title is actually a "film" object (that includes many keys), not the title string itself, so you want:

title.title.toLowerCase().includes(searchString)

Final code (with some variable renaming for clarity):

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>

0

117

Javascript Search Bar with Star Wars API

1 answers

0

Find remote jobs

Andres GPT