How to pass data from HTTP to repeater


#1

Hi,
I’m having my own API, that i need to get data from.
I’m able to do this, but i have problems with binding this to Repeater (repeater simply don’t see this as i think, Settimeout() funtion is running after page initialisation, and this becomes emoty for Repeater ?)

var frameModule = require('ui/frame');
var topmost = frameModule.topmost();
var Observable = require("data/observable").Observable;
var appSettings = require('application-settings');
var http = require("http");

exports.loaded = function(args) {
    var model = new Observable();
    model.heading = 'Dashboard';

    var studiosList;

    http.request({
        url: 'https://myownAPI.com/api/v1.0/studios',
        method: 'GET',
        headers: {
            "Authorization": appSettings.getString("token"),
            "Content-Type": "application/x-www-form-urlencoded"
        },
    }).then(function(response) {
        result = response.content.toJSON();
        studiosList = result;
        return studiosList;
    }).catch(function(error) {
        alert ('Error, please try');
    });
    // Console.log will show entries, but model.list binding is not working
    setTimeout(function() {
        console.log(studiosList);
        model.list = studiosList;
    },600)
    
    var page = args.object;
    page.bindingContext = model;
};
<Page class="page" loaded="loaded" xmlns:menu="components/menu" xmlns:home_header="components/home_header" xmlns:footer="components/footer">

    <GridLayout rows="120,*,60">

        <StackLayout row="0">
            <home_header:home_header/>
        </StackLayout>

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

            <StackLayout class="item">

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

                <Repeater items="{{ list }}">
                    <Repeater.itemTemplate>
                        <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="{{ address }}"></Label>
                            </StackLayout>
                            <Label row="0" col="1" class="fa next" text="&#xf0da;" verticalAlignment="middle"></Label>
                        </GridLayout>
                        <Label class="break"></Label>
                    </Repeater.itemTemplate>
                </Repeater>

            </StackLayout>
        </ScrollView>

        <StackLayout row="2">
            <footer:footer/><menu:menu/>
        </StackLayout>

    </GridLayout>

</Page>
  1. How inform the Repeater that i have data to show ?
  2. This setTimeout looks a bit confusing for me, is there a smarter way to get this data without using time ?

Thanks for any help.


#2

In fact (i hope i did this righ) it’s now working (model.set()…)

http.request({
        url: 'https://myownAPI/api/v1.0/studios',
        method: 'GET',
        headers: {
            "Authorization": appSettings.getString("token"),
            "Content-Type": "application/x-www-form-urlencoded"
        },
    }).then(function(response) {
        result = response.content.toJSON();
        studiosList = result.entries;
        // . THIS LINE BELOW
        model.set('it',studiosList);
        return studiosList;
    }).catch(function(error) {
        alert ('Error, please try');
    });