Creating view from http GET response


#1

Hi,
I’m looking for best way of creating views from API’s.
Simple Json response looks like this:(From http GET)

"entries": [

{
"id": 1,
"title": "title",
"address_line_1": "23 Shee",
"address_line_2": "",
"city": "Richmond",
"county": "Surrey",
"postcode": "TW 1BN",
"tel": "",
"map_latitude": "5.46107",
"map_longitude": "-0.0002"
},
{
"id": 2,
"title": "title",
"address_line_1": "House",
"address_line_2": "",
"city": "Oxford",
"county": "Oxfordshire",
"postcode": "O 1JD",
"tel": "",
"map_latitude": "5.75263",
"map_longitude": "-1.77286"
}
]

Simple part of view:

<ScrollView row="1" verticalAlignment="top" class="scrollview">

            <StackLayout class="item">

                <Label class="welcome" text="Pick a studio"></Label>


                <!-- This gridlayout should act as templete for every entry -->
                <GridLayout class="grid" rows="*,*" columns="*,70" tap="{{ loadPage }}" data-id="1">
                    <StackLayout row="0" col="0">
                        <Label class="primary" text="{{ title }}"></Label>
                        <Label class="second" text="{{ city }}"></Label>
                    </StackLayout>
                    <Label row="0" col="1" class="fa next" text="&#xf0da;" verticalAlignment="middle"></Label>
                </GridLayout>
                <Label class="break"></Label>
                <!-- This gridlayout should act as templete for every entry END -->

            </StackLayout>
        </ScrollView>

What im asking for is - how to render this data well on my xml view.
Do i need observalbeArray ?
Can you share any resources that will help to explain, how to to such things?

Thanks!


#2

Repeater to the rescue…

<StackLayout>
                <Label text="LIST NAME"></Label>
                <Repeater items="{{ items }}">
                    <Repeater.itemTemplate class="test">
                        <StackLayout class="fieldset">
                            <Label text="{{ title }}" class="icon-next"></Label>
                            <Button text="{{ name }}"></Button>
                        </StackLayout>
                    </Repeater.itemTemplate>
                </Repeater>
            </StackLayout>