Twig for loop in template not rendering

I seem unable to get a for loop to run properly within the template for instantsearch, any ideas why this would be? It’s as if the view is loading too late?

here is the part of my code with the for loop.

<# if ( data.col_1 ) { #>
				<ul class="swatches">
					<li class="two-color active">
						<a class="tool" href="{{ data.permalink }}">
							<span style="background-color: {{ data.col_1 }}"></span>
							<span style="background-color: {{ data.col_2 }}"></span>
						</a>
					</li>
					<# if ( data.swatches ) { #>
						   {% set swatches = data.swatches %}
						   {% for swatch in swatches %}
								<li class="two-color">
									test
								</li>
						   {% endfor %}
					<# } #>
				</ul>
			<# } #>

Here is front end output:

AS you can see its getting to the loop and then just printing out… I tried it with and without setting a data.swatches as a variable.

As a reference, this is the swatches array on Algolia.

Any support appreciated.