Как реализовать блок комментариев через js?

Question

[Стася]

Необходимо реализовать блок комментариев к фотографиям. Комментарии берутся с сервера, отрисовываются так:

class Comment {
    constructor(date, text){
        this.commentElement = this.create(date, text);
    }

    create(dateValue, textValue){
        const commentItem = document.createElement('div');
        commentItem.classList.add('popup__comment');
        commentItem.classList.add('comment');

        const commentDate = document.createElement('span');
        commentDate.classList.add('comment__date');
        commentDate.textContent = dateValue;

        const commentText = document.createElement('span');
        commentText.classList.add('comment__text');
        commentText.textContent = textValue;

        commentItem.appendChild(commentDate);
        commentItem.appendChild(commentText);

        return commentItem;
    }
}

class CommentList {
    constructor(container, items) {
        this.container = container;
        this.items = items;

        this.render();
    }

    addComment(date, text){
        const {commentElement} = new Comment(date, text);
        this.container.appendChild(commentElement);
    }

    render(){
        console.log(this.items);
        this.items.comments.forEach((comment) => {
            const dateToFormat = new Date(comment.date);
            const year = dateToFormat.getFullYear();
            const month = dateToFormat.getMonth();
            const date = dateToFormat.getDate();
            const finalDate = `${date}.${month + 1}.${year}`;

            this.addComment(finalDate, comment.text);
        })
    }
}

let commentList;
api.getPictures()
.then((data) => {
    data.forEach((item) => {
        fetch(`example.com`)
        .then(res => res.json())
        .then((data) => {
            commentList = new CommentList(commentContainer, data)
        })
        .catch((err) => {
            console.log(err);
        })
    })
}) 
.catch((err) => console.log(err));

Проблема в том, что комментарии есть только у двух из шести фотографий, а отрисовываются все комментарии подо всеми фотографиями. Как сделать так, чтобы нужные комментарии рисовались только под фотками, где они есть?

Comments

[Алексей Ярков]

Какая жесть... Отформатируйте ваш код, пожалуйста, используя встроенный редактор.

Answer 1

[Aetae]

Очевидно, вот здесь:

// ...
        .then((data) => {
            commentList = new CommentList(commentContainer, data)
        })

добавить проверку что в data есть комменты, примерно так:

// ...
        .then((data) => {
            if (data.comments && data.comments.length)
                commentList = new CommentList(commentContainer, data)
        })

Comments

[Стася]

делала так, все равно выводятся все комментарии под всеми фотографиями

[Aetae]

Чудеса. Что у вас выводит console.log(this.items)?

[Стася]

то, что нужно. именно те два объекта, у которых есть комментарии.

[Aetae]

Если в консоль у вас выводится только два нужных объекта, значит код вызывается только два нужных раза, значит проблема у вас где-то в другом месте.