How to iterate a nested model and generate Elements based on that - sapui5

Question

As the title states, I do have a Model, with Choices property which is nested.
let modelExample = {
0: {
"Description": "Example 0",
"Choices": [ "0", "1", "2" ]
},
1: {
"Description": "Example 1",
"Choices": [ "0", "1", "2" ]
},
2: {
"Description": "Example 2",
"Choices": [ "0", "1", "2" ]
}
};
It should construct a Table with Description as a Label and Choices as Buttons, something like:
Table:
<Table items="{modelExample>/}">
<columns>
<Column>
<Text text="Description" />
</Column>
<Column>
<Text text="Choices" />
</Column>
</columns>
<ColumnListItem>
<Label text="{modelExample>Description}" />
<SegmentedButton selectedButton="none">
<items>
<SegmentedButtonItem text="{modelExample>Choices/0}" />
<SegmentedButtonItem text="{modelExample>Choices/1}" />
<SegmentedButtonItem text="{modelExample>Choices/2}" />
</items>
</SegmentedButton>
</ColumnListItem>
</Table>
Issue: As it stands right now, it does work in this way. The problem is that; if you were to extend Choices to 20+ entries, it would also require to add 20+ SegmentedButtonItem, and that is something I try to avoid.
Question: How to generically generate Buttons based on a nested Choices-Property / How to also iterate through nested Choices?

Answer 1

Set your SegementedButton item path to {modelExample>Choices}. The path of your text property in SegmentedButtonItem is modelExample> because there's no key/value in your array.
<SegmentedButton items="{
path: 'modelExample>Choices',
templateShareable: false
}">
<items>
<SegmentedButtonItem text="{modelExample>}" />
</items>
</SegmentedButton>
In case of an array like [{0:"0"},{1:"1"},{2:"2"}] (Your example in your comment isn't valid) you should prepare you're array to receive a static property.
const aArray = [{0:"0"},{1:"1"},{2:"2"}];
const aPreparedArray = aArray.map(oObject =>{ //Loop through array
for(let key in oObject){ //Loop through object
return {propertyName: oObject[key]}; /return object with a static property
}
});
modelExample.setProperty("/", aPreparedArray); //Set array to model
Then you could use:
<SegmentedButton items="{
path: 'modelExample>Choices',
templateShareable: false
}">
<items>
<SegmentedButtonItem text="{modelExample>propertyName}" />
</items>
</SegmentedButton>