Trying to customize a multiple item lookup field using JSLink

Question

I'm trying to Customize a multiple item lookup field using JSLink, in SP 2013. This illustrates what I want to do:
I can replace the ";" with <br /> in the Text column, but not the Lookup column. Here is the JSLink code I'm using for the Text column. 
(function () {
var overrideCtx = {};
overrideCtx.Templates = {};
overrideCtx.Templates.Fields = {
'Text': { 'View' : '<#=ctx.CurrentItem.Text.toString().replace(";","<br />")#>' }
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
How can I display each item on separate lines in the Lookup column?

Answer 1

You can retrieve the values of the lookup column and reformat their display by replacing the following:
overrideCtx.Templates.Fields = {
'Text': { 'View' : '<#=ctx.CurrentItem.Text.toString().replace(";","<br />")#>' }
with something like this:
overrideCtx.Templates.Fields = {
'Lookup': { 'View' : function(ctx) {
var arr=[];
var fld=ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
for (i=0; i<fld.length; i++) {
arr.push(fld[i].lookupValue);
return arr.join("<br/>");
Here we are looping through each lookup value contained in the multi value lookup field and adding it to an array. Once complete, we use join to flatten the array and separate each entry with the <br/>. Note...this will show each value on a new line,
but it will be the string value without the hyperlink.  If you want the actual hyperlink to the item, you can rebuild the hyperlink and add that to the array instead. You can get the item's display form from ctx.CurrentFieldSchema.DispFormUrl and the
item's id from fld[i].lookupId for rebuilding the hyperlink.