UI5 Table Binding with Json Model Object

[Marian_Zeis]

Hi there,

i would like to bind a Object to a Table.

Sampel plunkr here: https://plnkr.co/edit/Z5F8j2ZYf0D5p957
It seems to work except for the key value.

var oModel2 = new JSONModel({
name: 'test',
object: {
	key1: 'value1',
	key2: 'value2',
	key3: 'value3',
	key4: 'value4',
},
});

<Table 
	items="{ path: 'jsonModel>/object'}">
	<columns>
		<Column>
			<Text text="Key" />
		</Column>
		<Column>
			<Text text="Value" />
			</Column>
	</columns>
	<items>
		<ColumnListItem vAlign="Middle">
			<cells>
				<Text text="{key}" />
				<Text
					text="{jsonModel>}" />
			</cells>
		</ColumnListItem>
	</items>
</Table>

I´ve no idea if it even works and how to address the key:

<Text text="{key}" />

Is there a simple solution to this or do i have to go with a custom binding in the controller?

Thanks!

[ThorstenHoefer · Accepted solution]

Hi,

what is about this solution?

var oModel2 = new JSONModel({
name: 'test',
object:[ 
        { key: 'value1', value: 'test'},
	{ key: 'value2', value: 'test'},
	{ key: 'value3', value: 'test'},
	{ key: 'value3', value: 'test'}
      ]
});

and the binding:

<Table 
	items="{ path: 'jsonModel>/object'}">
	<columns>
		<Column>
			<Text text="Key" />
		</Column>
		<Column>
			<Text text="Value" />
			</Column>
	</columns>
	<items>
		<ColumnListItem vAlign="Middle">
			<cells>
				<Text text="{jsonModel>key}" />
				<Text text="{jsonModel>value}" />
			</cells>
		</ColumnListItem>
	</items>
</Table>

[Marian_Zeis · Accepted solution]

Hi Thorsten,

another solution would be to use a formatter.
Formatter does not work if you want to sort/filter in the xml view.

Because i use the json directly from the source, so I didn't necessarily want to rewrite the data.
But in the end, it's better to manipulate some data in the backend instead of having a complicated code that is poorly maintainable in the frontend, so I implemented your suggestion.

Thank you for your contribution!