Algolia Instantsearch with Twig template - can't split string - php

Question

I'm using OctoberCMS and returning values from Algolia, the Twig template doesn't seem to be able to be split with the split() filter.
I have colours stored in each search item like this
["Blue_#3498db","Dark Green_#16a085","Turquoise_#06e5c7"]
As per the Algolia Instantsearch docs, my template is like this:
<script type="text/html" id="refinementListColourItem-template">
{% set itemValue = '{{value}}' %}
<div>
<a href="#">
<span>
{% set tests = itemValue|split('_') %}
{% for test in tests %}
{{ test }}
{% endfor %}
</span>
</a>
</div>
</script>
This will return the exact same string, and not split it at the underscore as expected.
The strange thing is if I manually add in one of the values like this, it works fine
{% set tests = 'Red_#c0392b'|split('_') %}
{% for test in tests %}
{{ test }}
{% endfor %}
If I dump() the variable itemValue it comes back as a string and it's not been converted to a HTML special character

Answer 1

I think you may be interpreting Algolia Instasearch wrong. Instasearch is a Javascript API, so the following code (as mentioned by #DarkBee in the comments) will split the string value "{{value}}". The Twig template you have in the question will return the following HTML.
<script type="text/html" id="refinementListColourItem-template">
<div>
<a href="#">
<span>
{{value}}
</span>
</a>
</div>
</script>
The above template is a valid Algolia Instasearch template. The issue is, that this is rendered before the InstaSearch API inserts your colour strings into the {{value}} part of the HMTL.
To actually achieve what you are wanting, you will actually need to use JavaScript to format the response or update your model to store the colours differently. The JavaScript (and adding ) should get you most of the way there. The code is untested and can likely be improved.
//assuming your algolia javascript variable is called search, and you have jQuery included on the page (common for OctoberCMS)
search.on('render', function() {
$(".color").each(function(){
var colour = $(this).text().split("_")[0];
$(this).text(colour); //will output first part of the text value
});
});
search.start();
Also, make the following change to your template:
<script type="text/html" id="refinementListColourItem-template">
<div>
<a href="#">
<span class="color">
{{value}}
</span>
</a>
</div>
</script>