separating a field containing commas

Question

Using handlebars.js and the Behance API - {{user.sections.[availability]}} outputs - Full-Time, Contract, Relocation.

I would like to have each comma separated word output as its item, similar to the following:

<ul>
  <li>Full-Time</li>
  <li>Contract</li>
  <li>Relocation</li>
</ul>

Would this include some Javascript or #each statement? If so could someone guide me toward a solution or snippet that will help?

For those asking ... here is my current javascript code, and HTML.

(function() {
    var behanceUserAPI = 'http://www.behance.net/v2/users/' + userID + '?callback=?&api_key=' + apiKey;
    function setUserTemplate() {
        var userData = JSON.parse(sessionStorage.getItem('behanceUser')),
            getTemplate = $('#user').html(),
            template = Handlebars.compile(getTemplate),
            result = template(userData);
        $('body').html(result);
        // AUTO-TIME GREETING + COPYRIGHT -----------------------------------------
        var date = new Date();
        var time = date.getHours();
        var greeting = "";
        if (time < 12) {
            greeting = "Morning";
        } else if ((time >= 12) && (time < 19)) {
            greeting = "Howdy";
        } else {
            greeting = "Evening";
        }
        document.getElementById("greeting").innerHTML = greeting;
        document.getElementById("auto-year").innerHTML = "Copyright &copy; " + date.getFullYear();
    }
    if (sessionStorage.getItem('behanceUser')) {
        setUserTemplate();
    } else {
        $.getJSON(behanceUserAPI, function(user) {
            var data = JSON.stringify(user);
            sessionStorage.setItem('behanceUser', data);
            setUserTemplate();
        });
    }
})();

<ul class="availability">
  {{#splitSTring user.sections.[Availability] delimiter=", "}}
    <li><i class="icon-check twentytwo color"></i><span>{{this}}</span>   </li>
  {{/splitString}}
</ul>

Brodie · Answer 1 · 2015-09-02T15:36:34.103

1

Editing to be in context of actual question:

You're going to want to take the field and turn it into an array. So something like

var availabilities = user.sections.availability.split(',');

//send availabilities to template

Then in your template you can print it out as:

{{#each availabilities as |time|}}
  <li>{{time}}</li>
{{/each}}

Or as @isherwood suggests you can register a HandleBars helper to do this for you.

edited Sep 02 '15 at 15:36

answered Sep 02 '15 at 15:29

Brodie

8,399
8
35
55

if the template is evaluating it like `user.sections.availability.toString()` and all the items in the array are strings, there is a chance that it would print out as 'item1, item2, item3'. – Brodie Sep 02 '15 at 15:32
Sorry, but if you read the whole question w/ title in context then yes I should have been more aware that it was a string field. – Brodie Sep 02 '15 at 15:34
It is not an array ... it is just text in a text field. So I would need a code that would read the text and separate each item based on the comma. I think ... – Bryan Counts Sep 02 '15 at 15:39
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split could do it I think. Just depends on if you want to do the split in the controller or at the template level. – Brodie Sep 02 '15 at 17:31

isherwood · Answer 2 · 2015-09-02T15:46:46.447

1

Register a helper and specify the comma-space as a delimiter.

Handlebars.registerHelper("splitString", function(options){
      var ret = "";

      var tempArr = context.trim().split(options.hash["delimiter"]);

      for(var i=0; i < tempArr.length; i++)
      {
        ret = ret + options.fn(tempArr[i]);
      }

      return ret;
});


<ul>
  {{#splitSTring user.sections.[availability] delimiter=", "}}
  <li>{{this}}</li>
  {{/splitString}}
</ul>

More

Note that this is an incomplete example. I've attempted to translate it to your code, but I don't have it all. I suggest starting with the linked example instead.

edited Sep 02 '15 at 15:46

answered Sep 02 '15 at 15:34

isherwood

58,414
16
114
157

I added my current code to my original post. I tried what you said but still did not work. I think now I am just not sure where and how to integrate your snippet into my code. – Bryan Counts Sep 02 '15 at 15:58
Any update now that have included my full code? I tried your "more" link and I was able to get it to work, however I had to disable part of the code, so I was not sure how to combine it all together, so your code, works with my code. – Bryan Counts Sep 02 '15 at 22:08

separating a field containing commas

2 Answers2