Javascript Fetch API 如何在点击用户时获取用户的 post 详细信息？

Question

我正在努力学习 Javascript 并且我正在做一个练习来获取两个不同的 API，一个用于用户，另一个用于帖子。练习有两个问题；第一个问题是关于获取用户并将其显示在网站上。用户是从这个网站获取的 https://jsonplaceholder.typicode.com/users.

第二个问题是关于获取帖子的。当用户在网站上显示时，您可以 select 一个用户并获取他的帖子。用户的帖子将显示在列表中。要获取 post/posts，我需要使用此 url：/posts?userId={userId}。例如，如果您单击具有 userId 5 的用户，您将从以下 url 中获取他的帖子：https://jsonplaceholder.typicode.com/posts?userId=5 我已经完成了第一个问题，但需要帮助才能完成第二个问题。谁能帮帮我？

How to place posts under the username?

fetch('https://jsonplaceholder.typicode.com/users')
.then(function (response) {
    return response.json();
})
.then(function (data) {
    appendData(data);
})
.catch(function (err) {
    console.log('error: ' + err);
});

function appendData(data) {
var mainContainer = document.getElementById("users");
for (var i = 0; i < data.length; i++) {
    var li = document.createElement("li");
    li.innerHTML =  data[i].username;

    li.dataset.userId = data[i].id;
    
    li.addEventListener('click', (event) => getPosts(event))
    mainContainer.appendChild(li);
}

}

function getPosts(event) {

var userId = event.target.dataset.userId;

fetch(`https://jsonplaceholder.typicode.com/posts?userId=${userId}`)
    .then(response => response.json())
    .then(json => renderPosts(json))
}

function renderPosts(posts) {
var titleContainer = document.getElementById("postTitle");
var bodyContainer = document.getElementById("postBody");
for (var i = 0; i < posts.length; i++) {
    var liTitle = document.createElement("li");
    var liBody = document.createElement("li");

    liTitle.innerHTML =  posts[i].title;
    liBody.innerHTML = posts[i].body;

    titleContainer.appendChild(liTitle);
    bodyContainer.appendChild(liBody);

//var title = posts.data.title;
//var body = posts.data.body;
//document.getElementById("postTitle").innerHTML = titleContainer;
//document.getElementById("postBody").innerHTML = bodyContainer;
}

<!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">
    <title>Javascript API Fetch Users and Posts</title>
</head>
<body>
    <h1>Users</h1>
    
    <div id="users"></div>
    <div id="postBody"></div>
    <div id="postTitle"></div>



    <script src="script.js"></script>
</body>
</html>

Answer 1

    
    <div id="users"></div>
    <div id="postBody"></div>
    <div id="postTitle"></div>

fetch('https://jsonplaceholder.typicode.com/users')
.then(function (response) {
    return response.json();
})
.then(function (data) {
    appendData(data);
})
.catch(function (err) {
    console.log('error: ' + err);
});


function appendData(data) {
var mainContainer = document.getElementById("users");
for (var i = 0; i < data.length; i++) {
    var li = document.createElement("li");
    li.innerHTML =  data[i].username;

  li.setAttribute('id',data[i].id);
  li.addEventListener('click' ,getPosts,false);


    mainContainer.appendChild(li);
}
}


function getPosts(event) {
    fetch(`https://jsonplaceholder.typicode.com/posts?userId${event.target.id}`)
        .then(response => response.json())
        .then(response => {
         console.log(response)
      //loop through response and  render  data 
    })
        
}

Answer 2

为了让您的代码正常工作，这里有一些注释更正。

<!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">
    <title>Javascript API Fetch Users and Posts</title>
</head>
<body>
    <h1>Users</h1>

    <div id="users"></div>

    <script src="script.js"></script>
</body>
</html>

            fetch('https://jsonplaceholder.typicode.com/users')
        .then(function (response) {
            return response.json();
        })
        .then(function (data) {
            appendData(data);
        })
        .catch(function (err) {
            console.log('error: ' + err);
        });

    function appendData(data) {
        var mainContainer = document.getElementById("users");
        for (var i = 0; i < data.length; i++) {
            var li = document.createElement("li");
            li.innerHTML =  data[i].username;
            li.classList.add('item');
            li.dataset.userId = data[i].id;
            li.addEventListener('click', (event) => getPosts(event))
            mainContainer.appendChild(li);
        }

    }

    function cleanPosts() {
        var users = document.querySelectorAll('.item ul');
        for(var i = 0; i < users.length; i++) {
            if(users[i]) {
                users[i].style.display = 'none';
            }
        }
    }

    function getPosts(event) {

        var userId = event.target.dataset.userId;

        fetch(`https://jsonplaceholder.typicode.com/posts?userId=${userId}`)
            .then(response => response.json())
            .then(json => renderPosts(json, event.target))
    }

    function renderPosts(posts, target) {
        var postsList = target.childNodes[1];

        cleanPosts();

        if(postsList){
            postsList.style.display = 'block';
        } else {
            var list = document.createElement("ul");

            for (var i = 0; i < posts.length; i++) {

                var item = document.createElement("li");
                var liTitle = document.createElement("strong");
                var liBody = document.createElement("p");

                liTitle.innerHTML = posts[i].title;
                liBody.innerHTML = posts[i].body;

                item.appendChild(liTitle);
                item.appendChild(liBody);
                list.appendChild(item);
            }

            target.appendChild(list);
        }

    }

我添加的一些您可能想要查看的内容是 addEventListener() and the use of data attributes

Javascript Fetch API 如何在点击用户时获取用户的 post 详细信息？

Javascript Fetch API How to get user's post details when you click on the user?

html

javascript

fetch-api