Creating a table properly from a JSON object in pug

Question

I am trying to break my JSON object into their individual elements and dynamically populate a table.)

Tried doing a sort of map with pug I guess (to dynamically populate the table.

        tr
          td.resultLog
            - let heatResult1Log = result.heat1Logs;
              for heatItem in heatResult1Log
                for item of heatItem
                #{item}
        tr

Here is the code that sends the result to pug:

return {

"Failures": {
    "coolCount1":coolFail1Rows.length/2 , coolCheck1Index:coolFails1Array,cool1Logs:coolFails1Logs,
    "heatCount1":heatFail1Rows.length/2 , heat1Logs:heatFails1Logs
  }};
}

Here is the returned object from my JS code (ignoring the heating side for now since the answer will be the same)

{ Failures:
   { coolCount1: 2,
     coolCheck1Index: [ 8865, 8866, 9077, 9078 ],
     cool1Logs:
      [ '[8865,"2019-03-14T04:00:00.000Z","3:10:00","cool","compressorCoolStage1On","auto","Sleep",74,74,75.3,"end"]',
        '[8866,"2019-03-14T04:00:00.000Z","3:15:00",null,null,null,null,null,null,null,"end"]',
        '[9077,"2019-03-14T04:00:00.000Z","20:50:00","cool","compressorCoolOff","auto","Home",76.8,76.8,77.3,"end"]',
        '[9078,"2019-03-14T04:00:00.000Z","20:55:00",null,null,null,null,null,null,null,"end"]' ],

} }

I tried mapping into the individual objects (since I want it to look like a normal table)

table.resultHeader
        tr
          th Index
          th Date
          th Time
          th System Setting
          th System Mode
          th Calendar Event
          th Program Mode
          th Cool Set Temperature
          th Heat Set Temperature
        tr

        tr
          td.resultLog
            - let heatResult1Log = result.heat1Logs;
              for heatArray in heatResult1Log
                for item in heatArray
                td #{item}
        tr

Which returns the array letter by letter seemingly.

Now technically I get it because the results are sent as an array of an array, but is there any option? I want my table and index to line up and it returns as an array of arrays not an array of individual elements.

My expected results would that it would look like a normal table ie

<table style="width:100%">
  <tr>
    <th>Index</th>
    <th>Date</th> 
    <th>Time</th>
(etc) 
  </tr>
  <tr>
    <td>0</td>
    <td>Sept 2</td> 
    <td>5:30</td>
  </tr>
</table>

At the end of every "inside array" (since its an array with arrays) , it would start a new row and fill the elements in for the next array. This is how it looks like now... (the index should have just the first element of each array , the date the 2nd and so on)

I've added an example - the number 5067 should appear under index (being the returned index), the date should appear under date.

This is what happens if I put a loop within a loop:

Here's what a solution might look like:

Answer 1

cool1Logs:
  [ '[8865,"2019-03-14T04:00:00.000Z","3:10:00","cool","compressorCoolStage1On","auto","Sleep",74,74,75.3,"end"]',
    '[8866,"2019-03-14T04:00:00.000Z","3:15:00",null,null,null,null,null,null,null,"end"]',
    '[9077,"2019-03-14T04:00:00.000Z","20:50:00","cool","compressorCoolOff","auto","Home",76.8,76.8,77.3,"end"]',
    '[9078,"2019-03-14T04:00:00.000Z","20:55:00",null,null,null,null,null,null,null,"end"]' ],

The object you are iterating is array of strings.

'[8865,"2019-03-14T04:00:00.000Z","3:10:00","cool","compressorCoolStage1On","auto","Sleep",74,74,75.3,"end"]',

this code is working correctly and it will give you characters in the string.

for item in heatArray
            td #{item}

You need to pass it as an array to the pug template. like below

[8865,"2019-03-14T04:00:00.000Z","3:10:00","cool","compressorCoolStage1On","auto","Sleep",74,74,75.3,"end"]