Javascript loop for HTML template

Question

I am building a list of items using a single JSON where several items have a common key:value pair and are sorted and clubbed together. The need is to make a header above the clubbed section using the common valued key-value pair. And then wrap the list items as per groups with the heading between group.

While most of the logic is written, the only thing that I am unable to implement is the closing DIV for the clubbed section .table-wrp.

This is the link to the codepen: https://codepen.io/nitinsuri/pen/OJgbXZN.

Any help will be highly appreciated.

What exactly is the desired result? You want a menu above the table or something? — Riza Khan
– Riza Khan, Commented Sep 7, 2021 at 1:40
The other thing is tables are nested in side of each other, which I am assuming is incorrect? — Riza Khan
– Riza Khan, Commented Sep 7, 2021 at 1:47

Riza Khan · Accepted Answer · 2021-09-07 02:28:59Z

I ended up recreating this with my own vision of what it 'should' look like (and apologies for the poor styling).

My main additions are as follows.

Getting a unique array of regions, since that is how we plan on segregating the array of items.

const uniqueRegions = [...new Set(bridgesListData.map(({region})=>region))].sort()

Next, based on the region you are in, you can retrieve the relevant items:

const itemsByRegion = (array, region) => {
  return bridgesListData.filter((item)=>item.region === region)
}

Simply pass the function expression the array and region in question and you will have the items you want.

Although it needs some styling help, the table can be displayed using a couple of forEach loops (I really don't like using a for loop because of how much additional complexities (vs benefits) it introduces.

let template = `<% uniqueRegions.forEach(region => {
 %> 
  <h1><%= region %></h1>
  <table>
  <thead>
   <tr>
    <th style="border-bottom: solid 1px black;">Truss Type</th>   
    <th style="border-bottom: solid 1px black;">Location</th>
    <th style="border-bottom: solid 1px black;">Year</th>
   </tr> 
   <thead>
   <tbody>
   <% itemsByRegion(bridgesListData, region).forEach(item => {
   %>
    <tr>
     <th><%= item.trussType %></th>
     <th><%= item.nameLocation %></th>
     <th><%= item.year %></th>
    </tr> <%
   }) %>
   </tbody>
  </table>
 <%}) %>`;

I hope I understood your requirements here.

Collectives™ on Stack Overflow

Javascript loop for HTML template

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related