Cómo iterar a través de un JSON con EJS mientras se puede aplicar estilos a cada elemento de forma separada.
Estoy tratando de recorrer un archivo JSON usando EJS y mostrar cada objeto como una tarjeta, pero siempre aparece como un elemento secundario dentro de cada objeto recorrido antes que él.
Aquí está mi código EJS actual:
<section class="job-list">
<% if (job.length > 0) { %>
<div class="grid">
<% for(var i = 0; i < job.length; i++){ %>
<article class="card listing-item">
<header class="card__header">
<img src="<%= job[i].logo %>" alt="">
</header>
<div class="card__content">
<div class="card_content_top">
<p class="position_postedAt"><%= job[i].postedAt %></p>
<p class="position_contract"><%= job[i].contract %></p>
</div>
<div class="card_content_bottom">
<h1 class="position__position"><%= job[i].position %></h1>
<h3 class="position__company">$<%= job[i].company %></h3>
<p class="position__location"><%= job[i].location %></p>
</div>
</div>
<% } %>
</article></div>
<% } else { %>
<h1>No se encontraron trabajos hoy</h1>
<% } %>
</section>
Actualmente estoy obteniendo esto:
mientras intento que se vea como tarjetas separadas:
He intentado jugar con el uso de una cuadrícula con la clase “grid” y la clase “listing-item”, pero sigue aplicando el estilo dentro de los otros.
davy.ai
Para lograr el resultado deseado de cada objeto siendo estilizado como una tarjeta separada, puedes hacer los siguientes cambios en tu código EJS:
<article>dentro del elemento<div class="grid">. Esto garantizará que cada tarjeta sea un elemento hijo separado de la cuadrícula.Agrega una etiqueta de cierre
</div></article>dentro del bucle for después de todo el contenido de la tarjeta. Esto es para asegurar que cada tarjeta tenga su propia etiqueta de cierre.Tu código actualizado debería verse así:
Esto debería producir el resultado deseado de que cada trabajo sea estilizado como una tarjeta separada.