Exercise to fetch data from JSON files using ES6 promises

There are lots of things you can do:

1. Use a parameterized function to create the XHR promises, since your three functions are identical other than what they're requesting
2. Use Promise.all, since none of the requests relies on information from previous requests and they can run in parallel
3. Move the JSON parsing into the functions retrieving the data, rather than making the consumer of them do it

And a bugfix, I think: The response text is this.responseText, not this.response, in the XHR load callback.

That would let us replace all of this:

const commentsPromise = new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.onload = function() {
        resolve(this.response);
    };
    xhr.onerror = reject;
    xhr.open('GET', root + 'comments');
    xhr.send();
});

const usersPromise = new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.onload = function() {
        resolve(this.response);
    };
    xhr.onerror = reject;
    xhr.open('GET', root + 'users');
    xhr.send();
});

const postsPromise = new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.onload = function() {
        resolve(this.response);
    };
    xhr.onerror = reject;
    xhr.open('GET', root + 'posts');
    xhr.send();
});

// Posts
postsPromise
    .then(data => {
        const posts = JSON.parse(data); // Contains our posts

        usersPromise
            .then(data => {
                const users = JSON.parse(data); // Contains our users
                commentsPromise
                    .then(data => {
                        const comments = JSON.parse(data);
                        displayPosts(posts, users, comments);
                    });
            });
    }).catch(error => { console.log(error); });

with this:

const requestJSON = objType => {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.onload = function() {
            try {
                resolve(JSON.parse(this.responseText));
            }
            catch (e) {
                reject(e);
            }
        };
        xhr.onerror = reject;
        xhr.open('GET', root + objType);
        xhr.send();
    });
};

Promise.all([requestJSON('posts'), requestJSON('users'), requestJSON('comments')])
    .then(results => {
        displayPosts(...results);
    })
    .catch(error => {
        console.log(error);
    });

So shorter, simpler, and more centralized for debugging, not repeating yourself, etc.

If you want the requests done in series instead of in parallel even though they don't have to be, just change the Promise.all part to:

requestJSON('posts')
    .then(posts => requestJSON('users')
        .then(users => requestJSON('comments')
            .then(comments => {
                displayPosts(posts, users, comments);
            })
        )
    )
    .catch(error => {
        console.log(error);
    });

(I tried to keep that in line with your line break/indentation style...)

Final result (with parallel requests):

'use strict';
const root = 'https://jsonplaceholder.typicode.com/';
const postList = document.querySelector('#post-list');
console.clear();

const requestJSON = objType => {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.onload = function() {
            try {
                resolve(JSON.parse(this.responseText));
            }
            catch (e) {
                reject(e);
            }
        };
        xhr.onerror = reject;
        xhr.open('GET', root + objType);
        xhr.send();
    });
};

Promise.all([requestJSON('posts'), requestJSON('users'), requestJSON('comments')])
    .then(results => {
        displayPosts(...results);
    })
    .catch(error => {
        console.log(error);
    });

// No changes from here on out...

function displayPosts(posts ,users, comments) {
    let output = '';
    posts.map(post => {
        output += `
            <li class="post"> 
                <h4> ${displayUserName(users, post)} </h4>
                <h3> ${post.title} </h3>
                <p> ${post.body} </p>
                <div class="comment-count"><span> ${displayCommentAmount(comments, post)} comments</span></div>
            </li>
        `;
    });
    postList.innerHTML = output;
}

function displayUserName(users, post) {
    return users.map(user => {
        if (user.id === post.userId) {
            return user.name;
        }
    }).join('');
};

function displayCommentAmount(comments, post) {
     const commentArray = comments.filter(comment => {
        return comment.postId === post.id;
    });
    return commentArray.length;
}