Make corrections to tabulating CSV-data tutorial
* Replace highlight tags with triple backticks * Replace hard tab characters with 2 spaces * Fix typos * Change tutorial title
This commit is contained in:
parent
842a809cab
commit
3c41a1eb1d
|
@ -1,5 +1,5 @@
|
||||||
---
|
---
|
||||||
title: Show CSV as a table
|
title: Tabulate CSV Data
|
||||||
author: MichaelCurrin
|
author: MichaelCurrin
|
||||||
date: 2020-04-01 20:30:00 +0200
|
date: 2020-04-01 20:30:00 +0200
|
||||||
---
|
---
|
||||||
|
@ -36,11 +36,12 @@ Jack,Hill,25,Australia
|
||||||
|
|
||||||
That data file will now be available in Jekyll like this:
|
That data file will now be available in Jekyll like this:
|
||||||
|
|
||||||
{% highlight liquid %}
|
|
||||||
{% raw %}
|
{% raw %}
|
||||||
|
```liquid
|
||||||
{{ site.data.authors }}
|
{{ site.data.authors }}
|
||||||
|
```
|
||||||
{% endraw %}
|
{% endraw %}
|
||||||
{% endhighlight %}
|
|
||||||
|
|
||||||
## 2. Add a table
|
## 2. Add a table
|
||||||
|
|
||||||
|
@ -52,20 +53,18 @@ For example: `table_test.md`
|
||||||
---
|
---
|
||||||
title: Table test
|
title: Table test
|
||||||
---
|
---
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
### Inspect a row
|
### Inspect a row
|
||||||
|
|
||||||
Grab the first row and see what it looks like using the `inspect` filter.
|
Grab the first row and see what it looks like using the `inspect` filter.
|
||||||
|
|
||||||
{% highlight liquid %}
|
|
||||||
{% raw %}
|
{% raw %}
|
||||||
|
```liquid
|
||||||
{% assign row = site.data.authors[0] %}
|
{% assign row = site.data.authors[0] %}
|
||||||
{{ row | inspect }}
|
{{ row | inspect }}
|
||||||
|
```
|
||||||
{% endraw %}
|
{% endraw %}
|
||||||
{% endhighlight %}
|
|
||||||
|
|
||||||
|
|
||||||
The result will be a _hash_ (an object consisting of key-value pairs) which looks like this:
|
The result will be a _hash_ (an object consisting of key-value pairs) which looks like this:
|
||||||
|
@ -81,28 +80,29 @@ The result will be a _hash_ (an object consisting of key-value pairs) which look
|
||||||
|
|
||||||
Note that Jekyll _does_ in fact preserve the order here, based on the original CSV.
|
Note that Jekyll _does_ in fact preserve the order here, based on the original CSV.
|
||||||
|
|
||||||
|
|
||||||
### Unpack a row
|
### Unpack a row
|
||||||
|
|
||||||
A simple solution would be to hardcode the field names when looking up the row values by key.
|
A simple solution would be to hardcode the field names when looking up the row values by key.
|
||||||
|
|
||||||
{% highlight liquid %}
|
|
||||||
{% raw %}
|
{% raw %}
|
||||||
|
```liquid
|
||||||
{{ row["First name"] }}
|
{{ row["First name"] }}
|
||||||
{{ row["Last name"] }}
|
{{ row["Last name"] }}
|
||||||
|
```
|
||||||
{% endraw %}
|
{% endraw %}
|
||||||
{% endhighlight %}
|
|
||||||
|
|
||||||
But we prefer a solution that will work for _any_ CSV, without specifying the column names upfront.
|
But we prefer a solution that will work for _any_ CSV, without specifying the column names upfront.
|
||||||
So we iterate over the `row` object using a `for` loop:
|
So we iterate over the `row` object using a `for` loop:
|
||||||
|
|
||||||
{% highlight liquid %}
|
|
||||||
{% raw %}
|
{% raw %}
|
||||||
|
```liquid
|
||||||
{% assign row = site.data.authors[0] %}
|
{% assign row = site.data.authors[0] %}
|
||||||
{% for pair in row %}
|
{% for pair in row %}
|
||||||
{{ pair | inspect }}
|
{{ pair | inspect }}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
```
|
||||||
{% endraw %}
|
{% endraw %}
|
||||||
{% endhighlight %}
|
|
||||||
|
|
||||||
This produces the following. Note the first item in each pair is the _key_ and the second will be
|
This produces the following. Note the first item in each pair is the _key_ and the second will be
|
||||||
the _value_.
|
the _value_.
|
||||||
|
@ -120,8 +120,8 @@ Here we make a table with a single table row (`tr`), made up of table header (`t
|
||||||
the header name by getting the first element (at index `0`) from `pair`. We ignore the second
|
the header name by getting the first element (at index `0`) from `pair`. We ignore the second
|
||||||
element as we don't need the value yet.
|
element as we don't need the value yet.
|
||||||
|
|
||||||
{% highlight liquid %}
|
|
||||||
{% raw %}
|
{% raw %}
|
||||||
|
```liquid
|
||||||
<table>
|
<table>
|
||||||
{% for row in site.data.authors %}
|
{% for row in site.data.authors %}
|
||||||
{% if forloop.first %}
|
{% if forloop.first %}
|
||||||
|
@ -134,10 +134,9 @@ element as we don't need the value yet.
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</table>
|
</table>
|
||||||
{% endraw %}
|
{% endraw %}
|
||||||
{% endhighlight %}
|
```
|
||||||
|
|
||||||
|
For now, we do not display any content from the second row onwards. We achieve this by using
|
||||||
For now,s we do not display any content for the second row onwards - we achieve this by using
|
|
||||||
`forloop.first`, since this will return true for the _first_ row and false otherwise.
|
`forloop.first`, since this will return true for the _first_ row and false otherwise.
|
||||||
|
|
||||||
|
|
||||||
|
@ -150,8 +149,8 @@ For convenience, we render using the `tablerow` tag - this works like a `for` lo
|
||||||
data will be rendered with `tr` and `td` HTML tags for us. Unfortunately, there is no equivalent for
|
data will be rendered with `tr` and `td` HTML tags for us. Unfortunately, there is no equivalent for
|
||||||
the header row, so we must write that out in full, as in the previous section.
|
the header row, so we must write that out in full, as in the previous section.
|
||||||
|
|
||||||
{% highlight liquid %}
|
|
||||||
{% raw %}
|
{% raw %}
|
||||||
|
```liquid
|
||||||
---
|
---
|
||||||
title: Table test
|
title: Table test
|
||||||
---
|
---
|
||||||
|
@ -171,11 +170,11 @@ title: Table test
|
||||||
{% endtablerow %}
|
{% endtablerow %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</table>
|
</table>
|
||||||
|
```
|
||||||
{% endraw %}
|
{% endraw %}
|
||||||
{% endhighlight %}
|
|
||||||
|
|
||||||
|
|
||||||
With the code above, our output table should look like this:
|
With the code above, the complete table would look like this:
|
||||||
|
|
||||||
<table>
|
<table>
|
||||||
<tr>
|
<tr>
|
||||||
|
|
Loading…
Reference in New Issue