Help creating an events page

support
1

Hi,

I’m creating an events page, but I have a little problem.

I have a json with all the events, like that:

{
"metadata": {
    "year": 2020
},
"events": [
    {
        "id": "first",
        "name": "First event",
        "startDate": "2020-01-15",
        "endDate": "2020-01-18",
        "description": "Description first event"
    },
    {
        "id": "second",
        "name": "Second event",
        "startDate": "2020-01-15",
        "endDate": "2020-01-18",
        "description": "Description second event"
    }
]
}

And I need the following result:

January 2020
* Description first event
* Description second event

But I don’t know how to accomplish that, I’ve only got the following:

January 2020
* Description first event
January 2020
* Description second event

This is the code:

            {{ range first 3 (sort .Site.Data.events "metadata.year" "desc") }}
            {{ range .events }}
                {{ if ge (dateFormat "20060102" .endDate) (dateFormat "20060102" now) }}
                    <h3 id="month:{{ dateFormat "200602" .startDate }}">{{ dateFormat "January 2006" .startDate }}</h3>
                    <ul>
                        <li id="{{ .id }}">
                            <p>
                                <b><a href="{{ .url }}">{{ .name }}</a></b>, {{ .location.site }}
                                {{ .location.country }} {{ .location.city }}
                                <br />
                                <em>{{ dateFormat "2" .startDate }} - {{ dateFormat "2 January, 2006" .endDate }}</em>
                                <br />
                                {{ .description }}
                            </p>
                        </li>
                    </ul>
                {{ end }}
            {{ end }}
        {{ end }}
2

A few things your JSON has bad formatting, Hugo can’t map an object thats not an array. You should also have the events and year in the same object like so:

[{
  "metadata": [
    {
      "year": "2020",
      "events": [
        {
          "id": "first",
          "name": "First event",
          "startDate": "2020-01-15",
          "endDate": "2020-01-18",
          "description": "Description first event"
        },
        {
          "id": "second",
          "name": "Second event",
          "startDate": "2020-01-15",
          "endDate": "2020-01-18",
          "description": "Description second event"
        }
      ]
    },
    {
      "year": "2019",
      "events": [
        {
          "id": "first",
          "name": "First event",
          "startDate": "2020-01-15",
          "endDate": "2020-01-18",
          "description": "Description first event"
        },
        {
          "id": "second",
          "name": "Second event",
          "startDate": "2020-01-15",
          "endDate": "2020-01-18",
          "description": "Description second event"
        }
      ]
    }
  ]
}
]

Then change your template to this to get your desired formatting:

{{range .Site.Data.test}}
  <div class="has-text-white">
    {{range .metadata}}
    <h1>{{.year}}</h1>
    <ul>
      {{range .events}}
      <li id="{{ .id }}">
        <p>
          <b><a href="{{ .url }}">{{ .name }}</a></b>, {{ .location.site }}
          {{ .location.country }} {{ .location.city }}
          <br />
          <em>{{ dateFormat "2" .startDate }} - {{ dateFormat "2 January, 2006" .endDate }}</em>
          <br />
          {{ .description }}
        </p>
      </li>
      {{end}}
    </ul>
    {{end}}
  </div>
  {{ end }}

Add any sorting logic you may need but that should get you on the right path, good luck.

3

Thanks!