Создание представления из http GET-ответа в Nativescript

Question

Я ищу лучший способ создания представлений из API. Простой ответ Json выглядит следующим образом: (из 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"
}
]

Простая часть просмотра:

<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>

Итак, я ищу способ преобразования ответа Json и добавления его в виде серии GridLayout class = "grid"

Я вижу, что это просто с Listview , поскольку связанные данные будут отображаться в виде простого способа:

// list-test.html
<ListView [items]="myItems" (itemTap)="onItemTap($event)">
    <ng-template let-item="item" let-i="index" let-odd="odd" let-even="even">
        <StackLayout [class.odd]="odd" [class.even]="even">
            <Label [text]='"index: " + i'></Label>
            <Label [text]='"[" + item.id +"] " + item.name'></Label>
        </StackLayout>
    </ng-template>
</ListView>

Спасибо за любые советы.

Answer 1

На самом деле, Listview является ответом.Или, для простых целей, Repeater.

Простые данные:

model.items = [
        {title: "Task Name", name: 'Project Name'},
        {title: "Task Name", name: 'Project Name'},
        {title: "Task Name", name: 'Project Name'},
        {title: "Task Name", name: 'Project Name'},
        {title: "Task Name", name: 'Project Name'},
        {title: "Task Name", name: 'Project Name'},
        {title: "Task Name", name: 'Project Name'},
    ]

XML-часть:

<StackLayout class="with-bottomnav">
                <Repeater items="{{ items }}">
                    <Repeater.itemTemplate>
                        <StackLayout class="repeat icon-next">
                            <Label text="{{ title }}"></Label>
                            <Label text="{{ name }}"></Label>
                        </StackLayout>
                    </Repeater.itemTemplate>
                </Repeater>
</StackLayout>