title: Handlebars - split string and iterate within {{each}}
body: <p>Basically I am rendering a JSON file into a HTML template with Handlebars and all works fine except for one value where I get returned a string with comma separated values.</p>
  <p>JSON file:</p>
  <pre><code>[
  {
          &quot;venue_state&quot;: &quot;Everywhere&quot;,
          &quot;venue_country&quot;: &quot;United States&quot;,
          &quot;venue_lat&quot;: &quot;34.2347&quot;,
          &quot;venue_lng&quot;: &quot;-77.9482&quot;,
          &quot;rating_score&quot;: &quot;4&quot;,
          &quot;created_at&quot;: &quot;2022-07-01 17:13:16&quot;,
          &quot;flavor_profiles&quot;: &quot;malty,biscuity,grainy,clove,banana&quot;
  },
  {
  ....
  }
  ]
  </code></pre>
  <p>HTML</p>
  <pre><code>&lt;script src=&quot;https://code.jquery.com/jquery-3.6.0.slim.min.js&quot; integrity=&quot;sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
  
   &lt;!--handlebars template--&gt;
      &lt;script id=&quot;checkin-template&quot; type=&quot;text/x-handlebars-template&quot;&gt;
      {{#each this}}
      &lt;div class=&quot;container&quot;&gt;
         &lt;h1&gt;{{venue_country}}&lt;h2&gt;
         &lt;p&gt;{{venue_state}}&lt;/p&gt;
          &lt;div class=&quot;some-other-container&quot;&gt;
              &lt;h1&gt;{{rating_score}}&lt;/h1&gt;
          &lt;/div&gt;
           &lt;ul class=&quot;tags&quot;&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;tag&quot;&gt;{{flavor_profiles}}&lt;/a&gt;&lt;/li&gt;
           &lt;/ul&gt;
      &lt;/div&gt;
      {{/each}}
      &lt;/script&gt;
  &lt;div class=&quot;output&quot;&gt;&lt;/div&gt;
            
  </code></pre>
  <p>script.js</p>
  <pre><code>$(document).ready(function () {
  
      var request = new XMLHttpRequest();
      request.open(&quot;GET&quot;, &quot;testdata.json&quot;, false);
      request.send(null);
      var data = JSON.parse(request.responseText);
      //console.log(data);
      
      //compile template and fill with data
      var source = $(&quot;#checkin-template&quot;).html();
      var template = Handlebars.compile(source);
      $('.output').append(template(data));
  
  });
  </code></pre>
  <p>This works except for <code>{{flavor_profiles}}</code>. What I <strong>want</strong> to get rendered is this</p>
  <pre><code>         &lt;ul class=&quot;tags&quot;&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;tag&quot;&gt;malty&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;tag&quot;&gt;biscuity&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;tag&quot;&gt;grainy&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;tag&quot;&gt;clove&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;tag&quot;&gt;banana&lt;/a&gt;&lt;/li&gt;
           &lt;/ul&gt;
  </code></pre>
  <p>What I <strong>actually get</strong> is</p>
  <pre><code>         &lt;ul class=&quot;tags&quot;&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;tag&quot;&gt;malty,biscuity,grainy,clove,banana&lt;/a&gt;&lt;/li&gt;
           &lt;/ul&gt;
  </code></pre>
  <p>and I guess it is because I get returned a string of comma separated values instead of an array?</p>
  <p>I tried something like this</p>
  <pre><code>    &lt;script id=&quot;checkin-template&quot; type=&quot;text/x-handlebars-template&quot;&gt;
      {{#each this}}
      &lt;div class=&quot;container&quot;&gt;
         &lt;h1&gt;{{venue_country}}&lt;h2&gt;
         &lt;p&gt;{{venue_state}}&lt;/p&gt;
          &lt;div class=&quot;some-other-container&quot;&gt;
              &lt;h1&gt;{{rating_score}}&lt;/h1&gt;
          &lt;/div&gt;
           &lt;ul class=&quot;tags&quot;&gt;
              {{#each flavor_profiles}}
                  &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;tag&quot;&gt;{{this}}&lt;/a&gt;&lt;/li&gt;
              {{/each}}
           &lt;/ul&gt;
      &lt;/div&gt;
      {{/each}}
      &lt;/script&gt;
  </code></pre>
  <p>and I also tried to register some helper function in <code>script.js</code> which did not work. This is a small hobby thing where I am just visualizing something in another way. So I don't want to use further frameworks or server side processing. The JSON gets pulled from elsewhere so I can't change how it looks. Is there any way within Handlebars to render my desired output?</p>