Uncaught (в обещании) TypeError: Невозможно прочитать свойство 'forEach' из неопределенного - PullRequest
Новая
       29

Uncaught (в обещании) TypeError: Невозможно прочитать свойство 'forEach' из неопределенного

0 голосов
/ 19 мая 2018

Я пытаюсь получить данные из базы данных OMDB для показа фильмов.Изначально я реализовал событие click для вызова данных, и ошибок не было найдено.Но когда я переключаюсь на keyup событие, я получаю эту ошибку.

Uncaught (в обещании) TypeError: Невозможно прочитать свойство 'forEach' из неопределенного в fetchMovie.getMovies.then.res(main.js: 27) fetchMovie.getMovies.then.res @ main.js: 27 асинхронная функция (асинхронная) searchInput.addEventListener @ main.js: 19 

   let searchInput = document.getElementById('search')

    class fetchData {
    constructor() {
        this.apiKey = 'here is APIKey'
    }

    async getMovies(movie) {
        const movieRes = await fetch(`http://www.omdbapi.com/?apikey=${this.apiKey}&s=${movie}`)
        const moveData = await movieRes.json()
        return {
            moveData
        }
    }
      }
    const fetchMovie = new fetchData

    searchInput.addEventListener('keyup', (e) => {
    let input = e.target.value

    if (input !== '') {
        fetchMovie.getMovies(input)
            .then(res => {
                let data = res.moveData.Search
                let output = ''
                data.forEach(movie => {
                    output += `
                    <div class="col-md-3">
                    <div class="card" style="width: 18rem;">
                    <img class="card-img-top" src="${movie.Poster}" alt="Card image cap">
                    <div class="card-body">
                      <h5 class="card-title">${movie.Title}</h5>
                      <p class="card-text">${movie.Year}</p>
                      <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                  </div>
                    </div>`
                });
                document.getElementById('container').innerHTML = output;
            })
    }
    e.preventDefault();
    })

SCEENSHOT

enter image description here

Исправлена ​​ошибка с пустыми изображениями, также добавлено событие keyup.Нет ошибок в консоли 

    let searchInput = document.getElementById('search');

class fetchData {

    constructor() {
        this.apiKey = '884df292'
    }

    async getMovies(movie) {
        const movieRes = await fetch(`http://www.omdbapi.com/?apikey=${this.apiKey}&s=${movie}`)
        const moveData = await movieRes.json()
        return {
            moveData
        }
    }
}
const fetchMovie = new fetchData

searchInput.addEventListener('keyup', (e) => {
    let input = e.target.value;

    if (input !== '') {
        fetchMovie.getMovies(input)
            .then(res => {
                let data = res.moveData.Search
                console.log(data)
                if (!data) {
                    return false
                } else {
                    let output = ''
                    data.forEach(movie => {
                        let poster
                        if (movie.Poster === "N/A") {
                            poster = `https://upload.wikimedia.org/wikipedia/commons/a/ac/No_image_available.svg`
                        } else {
                            poster = movie.Poster
                        }
                        output += `
                    <div class="col-md-3 movie-card">
                    <div class="card">
                    <img class="card-img-top" src="${poster}" alt="Card image cap">
                    <div class="card-body">
                      <h5 class="card-title">${movie.Title}</h5>
                      <p class="card-text">${movie.Year}</p>
                      <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                  </div>
                    </div>`
                    });
                    document.getElementById('container').innerHTML = output;
                }
            })
            .catch(err => console.log(err))
    }
    e.preventDefault();
})

1 Ответ

0 голосов
/ 20 мая 2018

Если вы видите скриншот журнала, вы сначала получаете и undefined регистрируетесь.Это, скорее всего, потому что ваша выборка происходит при каждом нажатии клавиши, и если вы ищете в API один символ (, который вы отправили с первым keyup), вы не получите никаких результатов и, следовательно,forEach терпит неудачу.

Либо проверяйте, имеют ли данные значение, перед выполнением forEach, либо даже не отправляйте выборку, если строка поиска состоит из одного символа. 

let data = res.moveData.Search
let output = ''
if (!data) return; //early break if not results where returned.

или измените if (input !== '') { на 

if (input.trim().length > 1) { // only do the fetch if more than one characters where entered

, хотя вы все равно не сможете получить результаты, даже если отправите более одного символа, так что 1-й подход безопаснее.

...