Estoy tratando de mostrar los resultados uno por uno con un texto como "Cargando..." y mostrar los resultados uno por uno. Encontré respuestas enuno , dos y traté de resolver esto, pero solo muestra un texto de carga y renderiza, muestra todos los resultados a la vez. Los resultados deben aparecer uno tras otro, conservando el orden. Si ocurre algún error durante la carga, la etiqueta debe dejarse vacía. ¿Cómo resolver este desafío? Para ver la pregunta completa, consulte aquí
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>`); }); }, });