时间戳

首页 > 解决方案 > 如何从使用 fetch api 和 javascript 获取的用户列表中显示模型中的用户配置文件

javascript - 如何从使用 fetch api 和 javascript 获取的用户列表中显示模型中的用户配置文件

问题描述

这是我的 javascript 代码，它能够显示使用 fetch api 的用户列表。

我想点击一个用户并使用 javascript 和 fetch api 在模型中显示他的信息。

我无法为模型添加标记。

我尝试在 for each 循环中创建模式，但这仅适用于列表中的第一个用户。

const url = "https://randomuser.me/api/?results=12 ";

var userView = document.querySelector(".gallery");

fetch(url)
    // Convert the data into JavaScript
    .then((response) => response.json())
    // Now we can use the data
    .then((data) => {
    // Log out the data
    //console.log(data);
    insertUsers(data);
    })
    // Log out any errors
    .catch((error) => console.error(error));
    
function insertUsers(users) {
    users.results.forEach((user) => {
        userView.insertAdjacentHTML(
          "beforeend",
          `<div class="card">
            <div class="card-img-container">
                <img class="card-img" src="${user.picture.large}" alt="profile picture">
            </div>
            <div class="card-info-container">
                <h3 id="name" class="card-name cap">${user.name.first}</h3>
                <p class="card-text">${user.email}</p>
                <p class="card-text cap">${user.location.city}, ${user.location.city}</p>
            </div>
        </div>`
        );

        document.querySelector('.card-img').addEventListener('click', function(){
            console.log(user.name.first);
        })
    });

}

我正在尝试通过单击用户图像来打开模型。

这是我要展示的模型的标记。

<div class="modal-container">
                <div class="modal">`enter code here
                    <button type="button" id="modal-close-btn" class="modal-close-btn"><strong>X</strong></button>
                    <div class="modal-info-container">
                        <img class="modal-img" src="https://placehold.it/125x125" alt="profile picture">
                        <h3 id="name" class="modal-name cap">name</h3>
                        <p class="modal-text">email</p>
                        <p class="modal-text cap">city</p>
                        <hr>
                        <p class="modal-text">(555) 555-5555</p>
                        <p class="modal-text">123 Portland Ave., Portland, OR 97204</p>
                        <p class="modal-text">Birthday: 10/21/2015</p>
                    </div>
                </div>

标签： javascriptapimodal-dialogfetch

解决方案

你可以在同一个元素上绑定多个click。我建议你一个一个地创建dom和绑定事件。

function insertUsers(users) {
    users.results.forEach((user) => {
        const dom = document.createElement('div')
        dom.setAttribute('class','card')
        dom.innerHTML = `
        <div class="card-img-container">
                <img class="card-img" src="${user.picture.large}" alt="profile picture">
            </div>
            <div class="card-info-container">
                <h3 id="name" class="card-name cap">${user.name.first}</h3>
                <p class="card-text">${user.email}</p>
                <p class="card-text cap">${user.location.city}, ${user.location.city}</p>
            </div>
        `
        //bind click event only to current element.
        dom.querySelector('.card-img').addEventListener('click',function(){
            console.log(user.name.first);
        })
        userView.appendChild(dom)
    });
}

推荐阅读