Блог

Главная - Вопросы по программированию - Не пойманный (в обещании) Ошибка типа: data.forEach не является функцией в `displayResult`

Не пойманный (в обещании) Ошибка типа: data.forEach не является функцией в `displayResult`

#javascript #github

Вопрос:

В моем коде JavaScript я продолжаю получать сообщение об ошибке:

Не пойманный (в обещании) Ошибка типа: data.forEach не является функцией

Я пытаюсь создать пользовательский поисковик github, и я использую этот api https://api.github.com/users/ . Я новичок в этой области, пожалуйста, помогите мне решить проблему.

 const searchUser = () => {
    const searchField = document.getElementById('seacrh-field');
    const searchText = searchField.value;
    console.log(searchText);
    searchField.value = '';;
    const url = `https://api.github.com/users/${searchText}`
    fetch(url)
        .then(res => res.json())
        .then(data => displayResult(data));

}

const displayResult = data => {
    const showResult = document.getElementById('displayResult');
    showResult.innerHTML = '';
    data.forEach(profile => {
        const div = document.createElement('div');
        div.classList.add('display-result');
        div.innerHTML = `
                <div class="img">
                    <img src="${profile.avatar_url}" alt="avatar">
                </div>
                <div class="details">
                    <div class="info">
                    <h3>Name: ${profile.name}</h3>
                    <p>username:${profile.login}</p>
                    <p>bio:${profile.name}</p>
                    <p>Created:${profile.created_at}</p>
                    <p>total-repo:${profile.public_repos}</p>
                    <p>followers:${profile.followers}</p>
                    <p>following: ${profile.following}</p>
                     
                </div>
                </div>
        `;
        showResult.appendChild(div);

    })
} 
 @import url('https://fonts.googleapis.com/css2?family=Pacificoamp;display=swap');

@import url('https://fonts.googleapis.com/css2?family=ZCOOL KuaiLeamp;display=swap');
@import url('https://fonts.googleapis.com/css2?family=Hina Minchoamp;display=swap');

*{
    margin: 0;
    padding: 0;
}
body{
    background-color: blueviolet;
}

.logo{
    text-align: center;
    font-family: 'Pacifico', cursive;
}

.logo img{
    width: 65px;
}

.searchresult{
    display: flex;
    justify-content: center;
    margin-top: 10px;
}
.searchinput{
    padding: 20px;
    width: 45%;
    margin-right: 5px;
    outline: none;
    border:2px solid blue;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: bold;
}

.searchbutton{
    background-color: black;
    padding: 20px;
    margin-right: 5px;
    outline: none;
    border:2px solid blue;
    border-radius: 10px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
}

.display-result{
    
    /* background-color: tomato; */
    margin-top: 10px;
    display: flex;
    justify-content: center;
}
.img{
    width: 28%;
    background-color: white;
}

.img img{
    width: 100%;
}
.details{
    background: #000;
    width: 30%;
    color: white;
}

.details .info{
    font-family: 'Hina Mincho', serif;
    text-align: left;
    margin-top: 30px;
    margin-left: 10px;
    font-size: 2rem;
    line-height: 40px;
}


footer{
    margin-top: 20px;
    text-align: center;
    font-size: 1.2rem;
    background: #000;
    height: 3vh;
    padding: 10px;
    color: #fff;
} 
 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Github Profile</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

</head>

<body>
    <header>
        <section>
            <div class="logo">
                <img src="img/git.png" alt="logo">
                <h3>Search Github</h3>
            </div>
        </section>
    </header>
    <main>
        <section>
            <div class="searchresult">
                <input id="seacrh-field" type="text" class="searchinput" placeholder="Search a github profile">
                <button class="searchbutton" onclick="searchUser()">Search User</button>

            </div>
        </section>
        <section>

            <div id="displayResult">
                <!-- <div class="display-result">
                <div class="img">
                    <img src="img/git.png" alt="">
                </div>
                <div class="details">
                    <div class="info">
                    <h3>Name: Hasibul Polok</h3>
                    <p>username: hasibulpolok</p>
                    <p>bio: love to learning #progremming lover</p>
                    <p>total-repo: 37</p>
                    <p>follower: 5</p>
                    <p>following: 13</p>
                    <p>tags: tag1, tag2, tag3</p> 
                </div>
                </div>
            </div> -->
            </div>
        </section>
    </main>
    <footer>
        <p>amp;copy;Hasibul Polok 2021 -
            <script type="text/javascript">var year = new Date(); document.write(year.getFullYear());</script>
        </p>
    </footer>
    <script src="js/app.js"></script>
</body>

</html>

Комментарии:

1. Этот API возвращает одного пользователя, а не массив пользователей. Почему вы используете forEach() ?

2. Если бы вы просто сделали console.log(data) это, это должно было быть очевидно.

Ответ №1:

Во-первых, вы должны проверить, какова ценность ответа.

Пробуем

https://api.github.com/users/1

мы видим, что результат-json:

введите описание изображения здесь

и forEach функция предназначена для работы с массивами, что означает, что вы не можете использовать ее с выводом json.

Правка: в своем коде избавьтесь от data.forEach части и используйте значения объекта напрямую, как вы это делаете ${profile.avatar_url} .

Метки: