Sort dates from json in Hugo

Mar 27, 2025

I manage concert data on a Hugo homepage in a JSON file. A distinction should be made between upcoming and past concerts. In addition, the date should be reformatted after sorting. Here is a bit of crazy code for this:

data/dates.json:

[
    {
        "date": "2024-03-01",
        "name": "Cool Pub",
        "city": "Pubville",
        "url": "https://..."
    },
    {
        "date": "2024-12-24",
        "name": "Punkfest",
        "city": "Punkcity",
        "url": "https://"
    },
    {
        "date": "2025-03-15",
        "name": "Rock in Town",
        "city": "Rocktown",
        "url": "https://"
    },
    {
        "date": "2025-08-28",
        "name": "Open Jazz Festival",
        "city": "Jazzville",
        "url": "https://"
    }
]

As you can see, the concerts are simply sorted from top (earliest) to bottom (latest).

Now the fun part.

themes/layouts/_default/home.html:

<div class="list">

    <div class="box">
        {{- $date_now := time.Now.Format "20060102" }}
        {{- $concerts := .Site.Data.dates }}
        {{- range $concerts }}
        {{- $date_concert := time.AsTime .date }}
        {{- $date_concert := $date_concert.Format "20060102" }}
        {{- if gt $date_concert $date_now }} <!-- greater than -->
        {{- $date_string := time.AsTime .date }}
        {{- $date_string := $date_string.Format "02.01.2006" }}

        <a href="{{ .url }}">
            <div class="concert">
                <p class="date">{{ $date_string }}</p>
                <p class="name">{{ .name }}</p>
                <p class="city">{{ .city }}</p>
            </div>
        </a>

        {{- end }}
        {{- end }}
    </div>

    <div class="box">

        <p class="title">Past concerts</p>
        {{- $date_now := time.Now.Format "20060102" }}
        {{- $concerts := .Site.Data.dates }}
        {{- range $concerts }}
        {{- $date_concert := time.AsTime .date }}
        {{- $date_concert := $date_concert.Format "20060102" }}
        {{- if lt $date_concert $date_now }} <!-- less than -->
        {{- $date_string := time.AsTime .date }}
        {{- $date_string := $date_string.Format "02.01.2006" }}

        <a href="{{ .url }}">
            <div class="concert">
                <p class="date">{{ $date_string }}</p>
                <p class="name">{{ .name }}</p>
                <p class="city">{{ .city }}</p>
            </div>
        </a>

        {{- end }}
        {{- end }}
    </div>
</div>

Maybe someone could use it. Don’t forget to rebuild the page after a concert!

Back…