It is interesting how the minor things eat away a lot of your time. Especially if you happen to be like me, one of the greater idiots on a planet full of idiots.

One of the days, I had to create website really fast to demonstrate to a potential customer. I abandoned my dear old friend Jekyll since - well, I had to create something in Hugo.

There was a requirement to show a data list (phone numbers and some related information) on one of the pages.

|Phone | Active|
|+91 1029292122 | Y|
|+91 1298329929 | Y|
|+91 1192389292 | Y|

Easy enough.

But, this data had to be changed by the end user - who is not super computer-savvy) and does not want to mess around with templates or md files.

There is Hugo feature called Data Driven Content to help in those situations.

So this..

Step 1:

Create CSV file in the static (static/csv) under my root folder.

Step 2:

Create a new partial in Layouts.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<section id="basic-content">
  <div class="container">
    <script>
      $(document).ready(function() {
        $("#csvnum").dataTable();
      });
    </script>

    <table
      id="csvnum"
      class="table table-striped table-bordered"
      style="width:100%"
    >
      <thead>
        <tr>
          <th>Phone</th>
          <th>Active</th>
        </tr>
      </thead>
      <tbody>
        {{ $url := "static/csv/phone_active.csv" }} {{ $sep := "," }} {{ range
        $i, $r := getCSV $sep $url }}
        <tr>
          <td>{{ index $r 0 }}</td>
          <td>{{ index $r 1 }}</td>
        </tr>
        {{ end }}
      </tbody>
    </table>
  </div>
</section>

So far so good. Except, the outcome isn’t anything but what I expect.

I get following errors depending on whether I refresh the browser during an even second or an odd second.

TypeError: c is undefined

OR

TypeError: col is undefined

I don’t claim to be an expert on JS, but did a fair bit of debugging here. My interim thoughts were focused on investigating how $(document).ready was called even though the data was not ready yet. I assumed this was the sole reason since the static table was getting rendered but the data from file wasn’t. What other reason could there be?

It turns out there are many valid reasons for the problem. And, I should not blame the collective wisdom of Javascript at every second error.

Excel and some formatting issues had introduced a third phantom column in the CSV. For good or for worse (mostly the latter), this did not show up in Excel, or in Notepad.

Datatable was all weird since <th> defines two columns while <td> has three.

The debugging of this problem should have ideally taken less than five minutes, and there I was exploring why the data table would not work after two hours of reading email, debugging stuff, checking Feedly, and so forth.