Javascript Fetch API 如何在点击用户时获取用户的帖子详细信息？答案

【问题标题】：Javascript Fetch API How to get user's post details when you click on the user?Javascript Fetch API 如何在点击用户时获取用户的帖子详细信息？
【发布时间】：2020-12-23 00:33:13
【问题描述】：

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

第二个问题是关于获取帖子的。当用户在网站上显示时，您可以选择一个用户并获取他的帖子。用户的帖子将显示在列表中。要获取帖子/帖子，我需要使用以下网址：/posts?userId={userId}。例如，如果您单击用户 ID 为 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>

【问题讨论】：

好吧，我想您应该为每个显示的用户添加getPosts() 函数，对吧？这样当您单击用户时，它会获取该用户的帖子？因此，我将更改appendData 以向每个li 添加一个事件侦听器，该事件侦听器指向一个调用getPosts(userId) 的函数，并带有用户的ID。因此，您需要更改 getPosts 以获取 userId 参数，并将其传递到您要获取的 URL 中。

标签： javascript html fetch-api

【解决方案1】：

这里有一些注释更正，以便您的代码能够正常工作。

<!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() 和data attributes 的使用

【讨论】：

你需要获取用户，我已经编辑了代码并包含了它。
它现在可以工作了，但是我发现了一个关于帖子的问题。我删除了 console.log(posts) 下面的 cmets。当我单击用户时，这给了我一个错误。错误说 posts.data 未定义。
是的，那是因为 posts 是一个数组而不是一个对象。每个用户有几个帖子。您可以使用与列出用户相同的方法，在帖子数组中进行 for 循环，然后创建一个元素，以便您可以通过 innerHTML 插入 post[i].title 和 post[i].body。创建元素并添加文本后，您可以将其附加到 postTitle 和 postBody div。它与 appendData 函数基本相同，但在这种情况下，您需要创建两个元素（标题和正文）并附加到两个不同的 div。
我写了一些代码，但是没有用。我的用户消失了。这是我写的代码，如果你能帮助我，我将不胜感激。可以从我的 OP 中看到新编辑的代码。
我看了看我的代码，好像忘了加括号。出现了一个问题，当我选择一个新用户时，标题和正文都没有消失，而是相互堆叠。我该如何解决这个问题？

【解决方案2】：

    
    <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 
    })
        
}

【讨论】：