html API_多个用户

uqdfh47h  于 2022-11-20  发布在  其他
关注(0)|答案(1)|浏览(92)

**我需要用html制作一个随机6个用户的表。我只得到一个用户数据!我该怎么做?我必须做一个循环吗?

这是我使用的代码**我试图改变id,但没有输出。请告诉我应该采取什么方法。

<body>

    <h2>API</h2>
    <table>
      <thead>
        <th>Full Name</th>
        <th>Age</th>
        <th>Gender</th>
        <th>Location</th>
        <th>Country</th>
      </thead>
    
<tbody>
  <tr>
    <td id="fullname"></td>
    <td id="age"></td>
    <td id="gender"></td>
    <td id="location"></td>
    <td id="counrty"></td>
  </tr>
  <tr>
    <td id="fullname"></td>
    <td id="age"></td>
    <td id="gender"></td>
    <td id="location"></td>
    <td id="counrty"></td>
  </tr>

  </table>

 
<script>
    const api_url="https://randomuser.me/api/";
  
    async function getUser() {
        const response= await  fetch(api_url);
        const data= await response.json();

        const user=data.results[0];
        let{first, last} = user.name;
        let{gender, email, phone} = user;
        let age = user.dob.age;
        let{city, state, country} = user.location;
        let fullName = first + " " + last;

        document.querySelector("#fullname").textContent = fullName;
        document.querySelector("#age").textContent = age;
        document.querySelector("#gender").textContent = gender;
        document.querySelector("#location").textContent = city + " ," + state;
        document.querySelector("#counrty").textContent= country;
      }
        getUser();
    
</script>    
</body>
</html>

'我应该做些什么来获取更多的随机用户?我应该创建更多的id吗?

bfrts1fy

bfrts1fy1#

我建议你在使用其他人的代码(api/framework等)时去看看文档。正如你从下面我的代码中看到的,你可以指定你想要从api返回多少用户,然后做一个简单的forEach将他们插入到表中。
第一个
请记住,元素的ID必须是唯一的

相关问题