mustache partial not looping through the data passed down to it - json

Question

I am using mustache in conjunction with enter link description herepattern lab to render out a list of items from a json data file. Given this data structure:
{
"states": {
"dropdown": {
"items": [
{
"title": "CA"
},
{
"title": "OR"
},
{
"title": "TX"
}
]
}
},
"roles": {
"dropdown": {
"items": [
{
"title": "Mid-level Office Manager"
},
{
"title": "Facility Manager"
},
{
"title": "Resources Coordinator"
}
]
}
}
}
If I do the following within my partial:
{{#states}}
{{#dropdown.items}}{{title}}{{/dropdown.items}}
{{/states}}
The names render out fine.
But if I do this:
{{#states}}
{{> molecules-dropdown-picker(btnDropdownToggleLabel: "OR")}}
{{/states}}
Where the dropdown picker partial has the following code:
{{#dropdown.items}}{{title}}{{/dropdown.items}}
It won't render. What am I doing wrong?

Answer 1

I figured this out by doing the following:
JSON:
{
"states": {
"inputTextLabel": "State",
"inputTextName": "address_state",
"btnDropdownToggleLabel": "OR",
"dropdownPickerItems": [
{
"dropdownItemTitle": "OR"
},
{
"dropdownItemTitle": "TX"
},
{
"dropdownItemTitle": "UT"
}
]
},
"roles": {
"inputTextLabel": "Company Role",
"inputTextName": "company_role",
"btnDropdownToggleLabel": "Facility Manager",
"dropdownPickerItems": [
{
"dropdownItemTitle": "Facility Manager"
},
{
"dropdownItemTitle": "Resources Manager"
},
{
"dropdownItemTitle": "Mid-level Manager"
}
]
}
}
FORM:
{{#states}}
{{> molecules-dropdown-picker-list}}
{{/states}}
DROPDOWN-PICKER-LIST:
<div class="dropdown-picker js-dropdown">
<ul class="dropdown-picker__list js-dropdown-list">
{{#dropdownPickerItems}}
{{> atoms-dropdown-picker-item}}
{{/dropdownPickerItems}}
</ul>
</div>
DROPDOWN-PICKER-ITEM:
<li class="dropdown-picker__item js-dropdown-item">
{{dropdownItemTitle}}
<span class="dropdown-picker__selected-check">
{{> atoms-icon(icon-type: "check-small") }}
</span>
</li>