Question

我是Javascript的新手我过去几天一直在播放一些数据。我创建了这个非常简单的程序（如果你甚至可以称之为），如果你单击一个按钮，它将生成一个随机用户的div（使用jsonplaceholder API）。我的问题是，无论何时单击按钮，它都会立即为我提供所有10个用户。我希望它能为每个用户提供一次点击。正如我所说，我对JS很新，所以我不确定如何接受这个（我想某种循环会涉及到什么？）。任何形式的建议，提示或任何东西都会受到欢迎！谢谢！

这是我的代码（使用Bootstrap 4进行样式设置，使用Axios进行数据提取）：

    const mainButton = document.getElementById('mainButton');
    const targetDiv = document.getElementById("targetDiv");
    
    mainButton.addEventListener('click', () => {
      axios
        .get("https://jsonplaceholder.typicode.com/users")
        .then(function(response) {
          let ourRequest = response;
          renderData(ourRequest.data);
        })
        .catch(function(error) {
          console.log(error);
        });
    
      function renderData(data) {
        var stringHTML = "";
    
        for (i = 0; i < data.length; i++) {
          stringHTML += `
              <div class="col-md-4">
                    <div class="card">
                        <div class="card-header">
                            User ID: #${data[i].id}
                        </div>
                        <div class="card-body">
                            <h4 class="card-title">${data[i].name}</h4>
                            <p class="card-text">Email - <em>${data[i].email}</em></p>
                            <p class="card-text">Phone - <em>${data[i].phone}</em></p>
                            <p class="card-text">Address - <em>${data[i].address.street}, ${data[i].address.city}, ${data[i].address.zipcode}</em></p>
                        </div>
                    </div>
                </div>    
              `;
        }
    
        targetDiv.insertAdjacentHTML("beforeend", stringHTML);
      }
    });

 <!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">
    <link rel="stylesheet" href="main.css">
    <title>JSON Users</title>
    </head>
    <body>
    <div class="container">
        <div class="text-center my-5">
            <h1 class="display-4">Random JSON Users</h1>
            <p>This is a random user generator, click the below button to get a 
    random person!</p>
            <button id="mainButton" class="btn btn-primary">Get User!</button>
        </div>
        
        <!-- Users -->
        <div id="targetDiv" class="row">
            
        </div>
    </div>
    

    <!-- JavaScript -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="main.js"></script>
    </body>
    </html>

Answer 1

如果我说得对，你的GET方法要求用户，那么响应包含的用户就多了。您发送到renderData方法的响应，并在那里为响应中的每个用户生成div。我支持将您的GET方法更改为仅获得一个用户，或者只从当前解决方案向renderData方法发送ourRequest.data[0]方法。

Javascript - 每次点击循环浏览数据

1 个答案: