时间戳

首页 > 解决方案 > Uncaught (in promise) TypeError: data.forEach 不是 `displayResult` 的函数

javascript - Uncaught (in promise) TypeError: data.forEach 不是 `displayResult` 的函数

问题描述

在我的 JavaScript 代码中，我不断收到错误消息：

Uncaught (in promise) TypeError: 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=Pacifico&display=swap');

@import url('https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Hina+Mincho&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>&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>

标签： javascriptgithub

解决方案

首先，您必须检查响应的值是什么。

尝试

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

我们可以看到结果是json：

在此处输入图像描述

和forEachfunction旨在与 arrays 一起使用，这意味着您不能将它与 json 输出一起使用。

编辑：在您的代码中，删除data.forEach部分并直接使用对象的值，就像您对${profile.avatar_url}.

推荐阅读