Airtable and Hugo

support
1

Hi, I’d like to add an Airtable table (with their API) to a page in Hugo.

Airtable API generates a JSON like this:

{
    "records": [
        {
            "id": "rec59ZTYA9oFg3DJl",
            "fields": {
                "Id": 1,
                "Title": "This is a title",
                "Text": "This is a text"
            },
            "createdTime": "2021-01-17"
        },
        {
            "id": "reccDvqIAlwJnnZ0",
            "fields": {
                "Id": 2,
                "Title": "This is a title 2",
                "Text": "This is a text 2"
            },
            "createdTime": "2021-01-17"
        },
        {
            "id": "recieerCw9dHE8Naq",
            "fields": {
                "Id": 3,
                "Title": "This is a title 3",
                "Text": "This is a text 3"
            },
            "createdTime": "2021-01-17"
        }
    ]
}

To view data, I write something like this:

 {{ $gistJ := getJSON "AIRTABLE_URL_WITH_API_KEY"}}
{{ range $gistJ }}
  {{ range . }}
    <ul>
      <li>{{ .fields.Title }}</li>
    </ul>
  {{ end }}
{{ end }}

It works, but I would order list by date, and I don’t know what code I have to use and where.

Thank you for your support.

2

Using your JSON on top and ignoring your code sample (there is no records in it, so it’s not what exactly you are using):

{{/* $dataJ is your complete JSON from above */}}
{{ $dataJ := getJSON "url" }}
{{ range $idx, $item := (sort $dataJ.records ".createdTime" "desc") }}
  {{ $idx }} is an integer from 0 to x-1 of count(records)<br/>
  {{ range $item }}
    ID: {{.id}}<br/>
    fields: {{.fields}}<br />
  {{ end }}
{{ end }}

something like that, not tested.

edit: I had to fix some missing brackets and wrong variable names in the code.

3

Thank you. I solved it.

My JSON (Airtable JSON) works only with a double range: {{ range dataJ }} with an inner generic {{ range . }}

So, If I use this code works:

{{ range $dataJ }}
{{ range $item := (sort . ".createdTime" “desc”) }}
    Id: {{ .fields.Id }}<br/>
   Title: {{.fields.Title}}<br />
{{ end }}
{{ end }}