How to replace "TRUE" with a checked checkbox and "FALSE" with a nonchecked checkbox in an HTML table?

Issue

I have a table that is formatted as

Code:

  #daily {
    display: block;
    position: relative;
    background-color: #3C4AB8;
    color: white;
    border-collapse: collapse;
    overflow-x: auto;
    overflow-y: auto;
    max-height: 80vh;
    width: 90vw;
    border: 10px solid #222A68;
    font-family: 'Roboto Mono', monospace;
    font-size: 20px;
    margin-top: 2em;
    margin-bottom: 2em;
    }


    #table thead th {
        position: sticky;
        top: 0;
    }
    
    td,
    th {
        border: solid #E3DAFF 2px;
        padding: 0.5rem;
    }
    
    th {
        position: sticky;
        top: 0;
        border-top: none;
        background: #222A68;
        top: 0;
        text-align: center;
        padding: 8px;
        text-transform: uppercase;
    }
    
    td {
        border-bottom: none;
        white-space: wrap;
    }

   <table id="daily">

            <thead>
                <tr>
                    <th class="year">year</th>
                    <th class="cutoff">cut off date</th>
                    <th class="name">Stefan</th>
                    <th></th>
                    <th class="name">Johnny</th>
                    <th></th>
                    <th class="name">Effie</th>
                    <th></th>
                    <th class="name">Karol</th>
                    <th></th>
                    <th class="name">Vardan</th>
                    <th></th>
                    <th class="name">Aman</th>
                    <th></th>
                    <th class="name">Jaspal</th>
                    <th></th>
                    <th class="name">Laurent</th>
                    <th></th>
                </tr>
            </thead>
            <tbody data-sheetdb-url="https://sheetdb.io/api/v1/xxxxxxxxx?sheet=Dashboard" data-sheetdb-sort-by="age"
                data-sheetdb-sort-order="desc">
                <tr>
                    <td id="date">{{year}}</td>
                    <td class="cutoff"><i>{{cut off date}}</i></td>
                    <td id="hours">{{Stefan}}</td>
                    <td class="checkbox">{{c1}}</td>
                    <td id="total">{{Johnny}}</td>
                    <td class="checkbox">{{c2}}</td>
                    <td id="total">{{Effie}}</td>
                    <td class="checkbox">{{c3}}</td>
                    <td id="total">{{Karol}}</td>
                    <td class="checkbox">{{c4}}</td>
                    <td id="total">{{Vardan}}</td>
                    <td class="checkbox">{{c5}}</td>
                    <td id="total">{{Aman}}</td>
                    <td class="checkbox">{{c6}}</td>
                    <td id="total">{{Jaspal}}</td>
                    <td class="checkbox">{{c7}}</td>
                    <td id="total">{{Laurent}}</td>
                    <td class="checkbox">{{c8}}</td>
                </tr>
            </tbody>
        </table>


  

This table fetches some data from a Google Sheet using https://sheetdb.io/ as a backend. There are values in some cells that are checkboxes returning as either "TRUE" or "FALSE".

How can I replace these values with checkboxes that are checked when the value is "TRUE" and unchecked when the value is "FALSE"?

Thank you!

Solution

You need to listen for the sheet loaded event

//Event listener for sheet loaded
window.addEventListener("sheetdb-downloaded", function () {
  //Iterate the checkbox items
  $(".checkbox").each(function () {
    //debug logging
    console.log($(this).text() == "TRUE")
    //UPdate the html based on loaded content
    $(this).html(
      `<input type="checkbox"${
        $(this).text().toUpperCase().trim() == "TRUE" ? " CHECKED" : ""
      }>`
    );
  });
});

Pen

Answered By - Jon P