Remove the words [map[option from JSON to HTML output

Hi, coming up with a title was a bit harder than expected. I am trying to create a list inside a dropdown. The dropdown and list is created from the same JSON file inside the data folder. The output is working fine, however, in the list, it adds part of the JSON code specifically map[option1

Please see my code here:

<div class="container d-flex flex-wrap">
{{ range $element := (index .Site.Data.faqsnumbered .Params.data) }}

<div class="col-md-12">
    <button class="w-100 btn bg-primary d-inline-flex text-white py-3 mb-3" type="button" data-toggle="collapse"
        data-target="#accordiancollapse-{{ $element.question | urlize }}" aria-expanded="false"
        aria-controls="accordiancollapse-{{ $element.question | urlize }}">
        {{ if $element.question }}
        <i class="fas fa-arrow-circle-down text-white pt-1"></i>
        <p class="text-left mb-0 ml-1"> {{ $element.question }}</p>
        {{ end }}
    </button>

    <div class="collapse" id="accordiancollapse-{{ $element.question | urlize }}">
        <div class="card card-body mb-3">
            {{ if $element.answer }}
            <p>{{ replace $element.answer "\r\n" "<br><br>" | safeHTML }}</p>
            {{ end }}
            {{ if $element.bold }}
            <p class="mb-0"><strong>{{ replace $element.bold "\r\n" "<br><br>" | safeHTML }}</strong></p>
            {{ end }}
            {{ if $element.list }}
            <ol>
                {{ print $element.list | safeHTML }}
            </ol>
            {{ end }}
        </div>
    </div>
</div>

{{ end }}

This is the code inside the JSON file:

{
"general": [
    {
        "question": "Why did my car insurance go up?",
        "answer": "Despite obeying the rules of the road, driving exceptionally well and not making any claims, you may find that your car insurance has gone up. Perhaps you’re not the best driver and you’ve violated a few road laws so you “deserve” a premium increase. Whatever your specific case may be, when car insurance rates go up, it’s best to know the reason why. Here are a few reasons insurance companies increase your car insurance rates:",
        "list": [
            {
                "option1": "<li>Insurance Claims\nTo prevent loss, insurance companies may raise your rates if you make a claim, especially if you were in an accident that was your fault. This is because you may be seen as a higher risk to the company than they originally thought you were. Basically, the higher your risk profile is, the higher your car insurance will be.</li><br>"
            },
            {
                "option2": "<li>Life changes\nLife changes, such as moving or changing jobs may affect your premiums. This is because of your living situation, distance from work etc. is usually taken into account when you apply for insurance. Whatever you do, do not hide information from your insurance company as they have the right to terminate your policy if you do not disclose necessary information.</li>"
            }
        ]
    }
]

}

finally, this is the output that I am getting:

Despite obeying the rules of the road, driving exceptionally well and not making any claims, you may find that your car insurance has gone up. Perhaps you’re not the best driver and you’ve violated a few road laws so you “deserve” a premium increase. Whatever your specific case may be, when car insurance rates go up, it’s best to know the reason why. Here are a few reasons insurance companies increase your car insurance rates:

[map[option1:
Insurance Claims To prevent loss, insurance companies may raise your rates if you make a claim, especially if you were in an accident that was your fault. This is because you may be seen as a higher risk to the company than they originally thought you were. Basically, the higher your risk profile is, the higher your car insurance will be.

] map[option2:
Life changes Life changes, such as moving or changing jobs may affect your premiums. This is because of your living situation, distance from work etc. is usually taken into account when you apply for insurance. Whatever you do, do not hide information from your insurance company as they have the right to terminate your policy if you do not disclose necessary information.
]]

I managed to fix this by updating the JSON file to look like this:

{
"general": [
    {
        "question": "Why did my car insurance go up?",
        "answer": "Despite obeying the rules of the road, driving exceptionally well and not making any claims, you may find that your car insurance has gone up. Perhaps you’re not the best driver and you’ve violated a few road laws so you “deserve” a premium increase. Whatever your specific case may be, when car insurance rates go up, it’s best to know the reason why. Here are a few reasons insurance companies increase your car insurance rates:",
        "list": "<li><b>Insurance Claims</b><br>To prevent loss, insurance companies may raise your rates if you make a claim, especially if you were in an accident that was your fault. This is because you may be seen as a higher risk to the company than they originally thought you were. Basically, the higher your risk profile is, the higher your car insurance will be.</li><br><li><b>Life changes</b><br>Life changes, such as moving or changing jobs may affect your premiums. This is because of your living situation, distance from work etc. is usually taken into account when you apply for insurance. Whatever you do, do not hide information from your insurance company as they have the right to terminate your policy if you do not disclose necessary information.</li>"  
    }
]

}

Should anyone have a solution to the original problem I listed above, please let me know.

{{ if $element.list }}
<ol>
{{ print $element.list | safeHTML }}
</ol>
{{ end }}

You can’t print a slice, otherwise it will show up as one. You should instead do:

{{if $element.list}}
<ol>
{{range $element.list}}
{{print . | safeHTML}}
{{end}}
</ol>
{{end}}
1 Like

Thank you very much :grinning:

1 Like