sap ui5 with json data binding - sapui5

Question

If I have json data like this
[{"processor":"Mr. XYZ","components":["asd","efg","ghi","fjk"]} ,
{"processor":"Mr. XYZ","components":["asd","efg","ghi","ghi"]} ,
{"processor":"Mr. XYZ","components":["asd","efg","lkl"]} ]
If I am binding this to a table:
<Table id="myt1" items="{path: '/'}">
<columns>
<Column>
<Label text="Processor"/>
</Column>
<Column>
<Label text="Components"/>
</Column>
</columns>
<items>
<ColumnListItem>
<Text text="{processor}"/>
<Text text="{components}"/>
</ColumnListItem>
</items>
</Table>
How do I bind the array of components in separate lines in a cell for a processor in that table ?
Please refer the image for the output I am looking for.
Thanks in advance !

Answer 1

You could use a text formatter to add a new line after each array element.
<ColumnListItem>
<Text text="{processor}"/>
<Text text="{
path: 'components',
formatter: '.formatter.formatText'
}"/>
</ColumnListItem>
Formatter:
sap.ui.define([], function () {
"use strict";
return {
formatText : function(s){
var sOut = "";
s.forEach(function(sTxt){
sOut += sTxt + "\n";
});
return sOut;
}
}
});