Range through arrays placed within a JSON file

support
1

I have a JSON like so:

{
  "data": {
    "slides": {
      "slide1": {
        "laptopName": "Laptop HP 450 G6",
        "laptopPhoto": "laptop-hp-1.png",
        "laptopCharacteristics": [
          "Characteristic one",
          "Characteristic two"
        ],
        "url": "#"
      },
      "slide2": {
        "laptopName": "Laptop HP 830 G6",
        "laptopPhoto": "laptop-hp-2.png",
        "laptopCharacteristics": [
          "Characteristic one",
          "Characteristic two"
        ],
        "url": "#"
      }
    }
  }
}

I am loping through that array this way:

 {{ $dataFile := getJSON "/data/business/laptops.json" }} {{range $dataFile.data.slides}}
<div class="swiper-slide">
    <div class="row">
        <div class="col-12 col-md-7 d-sm-flex slider-text">
            <div class="align-self-center py-5 py-sm-2">
                <h4 class="text-white main-text display-3">{{ .laptopName }}</h4>
               <ul class="characteristics"> </ul>
                <div><a href="{{.url}}" class="btn btn-md btn-primary">More mult</a></div>
            </div>
        </div>

        <div class="col-12 col-sm-12 col-md-5 laptop-photo">
            <img src="{{ .Site.BaseURL}}/images/business/oferte-speciale/{{ .laptopPhoto }}" class="img-fluid">
        </div>
    </div>
</div>
{{end}}

I want to place each characteristic in an <li> within <ul class="characteristics"> </ul>.

What is the best way to do that?

2

Something like this (untested)

<ul class="characteristics">
{{range .laptopCharacteristics }}
<li>{{ . }}</li>
{{ end }}
</ul>

The . is the current slide, so you can range through laptopCharacteristics - and inside of THAT range the . is each item of laptopCharacteristics. After the {{ end }} the . is the current slide again.

1 Like