时间戳

首页 > 解决方案 > axios.get forEach 仅显示 1 个结果

javascript - axios.get forEach 仅显示 1 个结果

问题描述

基本上这是HTML

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>movieCard</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    <style>
        img.mal {
            -webkit-user-drag: none;
            -moz-user-drag: none;
            -o-user-drag: none;
            user-drag: none;
        }
        img.mal {
            pointer-events: none;
        }
        .movie_card.mal{
            padding: 0 !important;
            width: 22rem;
            margin:14px; 
            border-radius: 10px;
            box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 15px 0 rgba(0, 0, 0, 0.19);
        }
        .movie_card.mal img.mal{
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            height: 33rem;
        }
        .movie_info.mal{
            color: #5e5c5c;
        }

        .movie_info.mal i.mal{
            font-size: 20px;
        }
        .card-title.mal{
            width: 80%;
            height: 4rem;
        }
    </style>
        <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    
</body>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<script>
    $(function () {
      $('[data-toggle="tooltip"]').tooltip()
})
</script>
<script>
    axios.get(`https://api.jikan.moe/v3/user/humzaa-senpai/animelist/watching`, { headers: { Accept: "application/json" } }).then(list => {
    list.data.anime.forEach(item => {
    
        var date = new Date(item.start_date)
        var year = date.getFullYear()
    
        console.log(item)
    
        document.getElementById('watch_list')
        .insertAdjacentHTML(
            'beforeend',
            `
            <a href="${item.url}">
    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="card movie_card">
              <img src="${item.image_url}" class="card-img-top" alt="...">
              <div class="card-body">
                <h5 class="card-title">${item.title}</h5>
                       <span class="movie_info">${year}</span>        </div>
            </div>
        </div>
    </div>
    </a>
            `
        );
    
        i++;
    });
    
    })
</script>
    <div id="watch_list"></div>


</html>

但是每当我打开 HTML 时，它会正确显示格式，但它只显示 1 个结果而不是所有结果！！！

我以前用 nodejs 做过这个（用一个 CLI 应用程序），但它现在不起作用

我怎样才能解决这个问题？

我应该添加一个循环吗？

这是 输出

我真的没有任何其他话因为我是新手所以请停止说“看起来你的帖子主要是代码，请添加更多细节”

标签： javascripthtmlwebbootstrap-4axios

解决方案

  • 只需删除 i++行（从末尾开始的第 6 行），您的代码就会运行良好。i 未定义，因此它正在创建错误ReferenceError: i is not defined

删除行 i++ 后的代码片段

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>movieCard</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    <style>
        img.mal {
            -webkit-user-drag: none;
            -moz-user-drag: none;
            -o-user-drag: none;
            user-drag: none;
        }
        img.mal {
            pointer-events: none;
        }
        .movie_card.mal{
            padding: 0 !important;
            width: 22rem;
            margin:14px; 
            border-radius: 10px;
            box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 15px 0 rgba(0, 0, 0, 0.19);
        }
        .movie_card.mal img.mal{
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            height: 33rem;
        }
        .movie_info.mal{
            color: #5e5c5c;
        }

        .movie_info.mal i.mal{
            font-size: 20px;
        }
        .card-title.mal{
            width: 80%;
            height: 4rem;
        }
    </style>
        <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    
</body>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<script>
    $(function () {
      $('[data-toggle="tooltip"]').tooltip()
})
</script>
<script>
    axios.get(`https://api.jikan.moe/v3/user/humzaa-senpai/animelist/watching`, { headers: { Accept: "application/json" } }).then(list => {
    list.data.anime.forEach(item => {
    
        var date = new Date(item.start_date)
        var year = date.getFullYear()
    
        console.log(item)
    
        document.getElementById('watch_list')
        .insertAdjacentHTML(
            'beforeend',
            `
            <a href="${item.url}">
    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="card movie_card">
              <img src="${item.image_url}" class="card-img-top" alt="...">
              <div class="card-body">
                <h5 class="card-title">${item.title}</h5>
                       <span class="movie_info">${year}</span>        </div>
            </div>
        </div>
    </div>
    </a>
            `
        );
    });
    
    })
</script>
    <div id="watch_list"></div>


</html>

推荐阅读