I am trying to learn Javascript and I’m working on an exercise that fetches two different APIs, one for users and the other for posts. The exercise has two questions; first question is about fetching users and displaying them on the website. Users are fetched from this website <https://jsonplaceholder.typicode.com/users.>

Second question is about fetching posts. When users are being displayed on the website you can select a user and get his posts. User’s posts are going to be displayed in a list. To fetch post/posts I need to use this url: /posts?userId={userId}. For example if you click on a user that has userId 5 you’re fetching his posts from following url: <https://jsonplaceholder.typicode.com/posts?userId=5>
I’m already finished with the first question, but need help to finish the second one. Can anyone help me out?

[How to place posts under the username?](https://i.stack.imgur.com/NXvzt.png)

```js
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;
}
```

```html
<!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>
```