I'm trying to render results one by one with some text like "Loading..." and show results one by one. I found answers at one, two and tried to solve this but it shows only one loading text and renders, shows all results at a time. The results should appear one after the other, with the order preserved. If any error occurs during the loading, the tag should be left empty. How to solve this challenge? For full question please refer here
HTML
<!DOCTYPE html>
<html>
<head>
<title>Render Comments</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div class="comment-list" data-count=1></div>
<script type="text/javascript" src="./app.js"></script>
</body>
</html>
JS
"use-strict";
var commentList = $(".comment-list");
var count = $(".comment-list").data("count");
var url = "https://jsonplaceholder.typicode.com/comments?postId=" + count;
$.ajax({
url: url,
method: "GET",
beforeSend: function () {
commentList.html("Loading...");
},
success: function (data) {
commentList.empty();
data.forEach(function (comment) {
commentList.append(`
<div class="comment-item">
<div class="comment-item__username">${comment.id}</div>
<div class="comment-item__message">${comment.name}</div>
</div>`);
});
},
error: function () {
// commentList.empty();
data.forEach(function () {
commentList.append(`
<div class="comment-item">
<div>Oops! Error occured to show the results</div>
</div>`);
});
},
});