ui5 de sève avec des données JSON liant

Question

Si j'ai données JSON comme celui-ci

[{"processor":"Mr. XYZ","components":["asd","efg","ghi","fjk"]} , 
{"processor":"Mr. XYZ","components":["asd","efg","ghi","ghi"]} , 
{"processor":"Mr. XYZ","components":["asd","efg","lkl"]} ] 

Si je lient cela à une 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> 

Comment lier l'ensemble des composants dans des lignes distinctes dans une cellule pour un processeur dans cette table? S'il vous plaît se référer à l'image pour la sortie que je cherche.

Merci d'avance!

Answer 1

Vous pouvez utiliser un formatter de texte pour ajouter une nouvelle ligne après chaque élément de tableau.

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