How to implement block comments using js?

You must implement the comment block to the photos. Comments taken from the server are rendered like this:
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));

The problem is that comments are only two of the six photos, and to render all comments under all the pictures. How to make the proper comments were drawn only under the photos of where they are?
April 4th 20 at 00:51
1 answer
April 4th 20 at 00:53
Obviously, here:
// ...
 .then((data) => {
 commentList = new CommentList(commentContainer, data)
 })
to add a check that data is the comments, like this:
// ...
 .then((data) => {
 if (data.comments && data.comments.length)
 commentList = new CommentList(commentContainer, data)
 })
did so, still displays all the comments under all the pictures - Miles.Pouros9 commented on April 4th 20 at 00:56
Miracles. What you have displays console.log(this.items)? - Fabiola_Murphy commented on April 4th 20 at 00:59
what you need. those two objects that have comments. - Miles.Pouros9 commented on April 4th 20 at 01:02
If you have the console displays only two of the object, so this code is only needed two times, then the problem is somewhere else. - Fabiola_Murphy commented on April 4th 20 at 01:05

Find more questions by tags JavaScript