Querying Nested Params in Hugo

Question

I have the following configuration in my Hugo.toml:

[[params.pricing]]
    PricingTitle = "Starter"
    PricingRate = "27"  
    ButtonCaption = "Get Early Access"
    [[features]]
        Description = "First Lorem ipsum is common text"
    [[features]]
        Description = "Second Lorem ipsum is common text"

[[params.pricing]]
    PricingTitle = "Professional"
    PricingRate = "97"
    ButtonCaption = "Get Early Access"
    [[features]]
        Description = "First Lorem ipsum is common text"
    [[features]]
        Description = "Second Lorem ipsum is common text"
    
[[params.pricing]]
    PricingTitle = "Business"
    PricingRate = "147"
    ButtonCaption = "Get Early Access"
    [[features]]
        Description = "First Lorem ipsum is common text"
    [[features]]
        Description = "Second Lorem ipsum is common text"

And when I am trying to access the nested value of feature description, while other values like Rate etc display fine, the code fetches nothing, what am I doing wrong here?

<h2 class="section-title mt-0 text-center">Pricing</h2>
<div class="pricing-tables-wrap">
    {{ range site.Params.pricing }}
        <div class="pricing-table">
            <div class="pricing-table-inner">
                <div class="pricing-table-main">
                    <div class="pricing-table-header is-revealing">
                        <div class="pricing-table-title mt-12 mb-8">{{ .PricingTitle }}</div>
                        <div class="pricing-table-price mb-32 pb-24"><span class="pricing-table-price-currency h4">$</span><span class="pricing-table-price-amount h2">{{ .PricingRate }}</span>/mo</div>
                    </div>
                    <ul class="pricing-table-features list-reset text-xs mt-24 mb-56">
                        {{ range .features }}
                            <li class="is-revealing">
                                <span class="list-icon">
                                    <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
                                        <path fill="#5FFAD0" fill-rule="nonzero" d="M5.6 8.4L1.6 6 0 7.6 5.6 14 16 3.6 14.4 2z"/>
                                    </svg>
                                </span>
                                <span>{{ .Description }}</span>
                            </li>    
                        {{ end }}
                    </ul>
                </div>
                <div class="pricing-table-cta is-revealing">
                    <a class="button button-primary button-shadow button-block" href="#">{{ .ButtonCaption }}</a>
                </div>
            </div>
        </div> 
    {{ end }}
</div>

Thanks for the help.

score 0 · Answer 1 · answered Aug 23 '23 at 19:46

Your configuration file structure doesn't match the structure expected in the code. The [[features]] section is actually a top-level field, represented as an array with six values.

To resolve this issue, you'll need to update the configuration file. Simply replace all instances of [[features]] with [[params.pricing.features]]. Using a TOML to JSON converter might be helpful, as it can provide a clearer view of the structure (since TOML syntax can be a bit cluttered).

Note that while indentation can improve the readability of the TOML file, it doesn't impact the actual data structure.

Querying Nested Params in Hugo

1 Answers1