Processing Two Sliced Variables in sync

Hello all :slight_smile:

I am trying to emulate the Tabs with dropdown (Navs and tabs · Bootstrap v5.0) of Bootstrap in my goHugo work.

I was successful when I was handling two sliced variables -

{{ $letters := slice "a" "b" "c" ... "z" }}
{{ $tabCodes := slice "A001" "A002" "A003" "B001"  "B002" ... "Z00x" }}

And a use of two range blocks helped me good.

But the dropdowns used to display A001, A002 and so on for their letters.

Now I want to change the display of codes instead to show the Fruit Names. So I brought in a 3rd variable

{{ $fruitName := slice "Apple" "Apricot" "African Mango"  ... }} and so on.

The problem now is that - either I change my codes and remove the intermediate second variable ($tabCodes) or I figure out some way where I can navigate both these variables inside that range block.

So what I am ideally looking out is -
Some way wherein I can traverse the two slices inside the loop/range so that I dont need to change the codes that are already working out with the $tabCodes.

So in effect when I click the letter A on the dropdown, instead of showing me the codes “A001” it would show “Apple” (which has the code A001). This is so because of two things -

  1. People dont figure out the codes well (A001 is not sensible enough, however, Apple is).
  2. I agree, All A codes do not have fruit names that start with A. If I change this most of my working codes will need to be changed.

Would be a great help if someone could send me a pointer on how to proceed. Note: The number of sliced stuff in both tabCodes and fruitNames is same and all I need to know is a way so that as I traverse in the tabCodes, I also keep accessing its related / corresponding fruitName.

Thanks and regards.
Sid.

Without getting into all of the details, it seems like you are maintaining three slices, and there’s something about each fruit in each slice.

If that is the case, restructure your data into map, or a slice of maps.

[
  {
    "name": "Apple",
    "code": "A001",
    "first_letter": "a"
  },
  {
    "name": "Banana",
    "code": "B001",
    "first_letter": "b"
  }
]