Estoy tratando de implementar este código pero no funciona como se esperaba. El problema se explica a continuación.

 <% if (Object.keys(notes).length !== 0) { %> <p class="card-text w-100" id="bookShelf"> <div class="inline-block"> <% notes.forEach(note => { %> <div class="card ml-2" style="width: 18rem;"> <div class="card-body"> <h5 class="card-title"><%= note.title %> </h5> <p class="card-text"><%= note.body %> </p> </div> </div> <% }); %> </div> </p> <% } else { %> <p class="card-text w-100" id="bookShelf" aria-placeholder="Add some notes..."> You have not added any notes </p> <% } %>

En el código anterior, el objeto 'notas' se sirve desde el back-end y no está vacío. Al representar este código ejs, obtengo el resultado de tal manera que el último elemento de párrafo de 'texto de tarjeta' todavía se sirve en el front-end sin ningún elemento. Y el primer elemento de párrafo 'texto de la tarjeta' se muestra por separado en lugar de encerrar el elemento div que contiene las notas. En un caso ideal, se espera mostrar cualquiera de los elementos del párrafo, pero no ambos.

Consulte las capturas de pantalla adjuntas para comprender mejor el problema. Ya he pasado demasiado tiempo en esto y todavía no pude resolver el problema a menos que sea un error de algún tipo. Cualquier sugerencia o ayuda por pequeña que sea será agradecida.

EDITAR : tenga en cuenta que funciona como se esperaba cuando el objeto 'notas' está vacío, es decir, solo se muestra el último elemento del párrafo.