sap ui5 with json data binding

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;
    }
 }
});