Nativescript Pass data to view

Question

I am facing a problem while developing a nativescript android app.I am trying to send a POST request and from that request I am trying to get a response.Using this response I am trying to populate a ListView. I have successfully sent the post request and got the response from server.But problem is I can not populate the listview.Here is my code-

Register.xml

   <Page loaded="loaded">
    <StackLayout>
        <Image src="res://logo" stretch="none" horizontalAlignment="center"/>

        <TextField text="{{ name }}" id="name" hint="Name"  />

        <TextField text="{{ email }}" id="email" hint="E-mail"  />

        <TextField text="{{ password }}" secure="true" hint="Password" />

        <Button text="Sign Up" tap="register" />
    </StackLayout>
</Page>

Register.js

var dialogsModule = require("ui/dialogs");
var frameModule = require("ui/frame");

var UserViewModel = require("../../shared/view-models/user-view-model");
var user = new UserViewModel();

exports.loaded = function(args) {
    var page = args.object;
    page.bindingContext = user;
};

function completeRegistration() {
    user.register()
        .then(function() {
            dialogsModule
                .alert("Your account was successfully created.")
                .then(function() {
                    frameModule.topmost().navigate("views/list/list");
                });
        }).catch(function(error) {
            console.log(error);
            dialogsModule
                .alert({
                    message: "Unfortunately we were unable to create your account.",
                    okButtonText: "OK"
                });
        });
}

exports.register = function() {
    completeRegistration();
};

User-view model.js

function User(info) {
    info = info || {};


    var viewModel = new Observable({
        name: info.name || "",
        email:info.email || "",
        password: info.password || "",
    });

    viewModel.register = function() {



    return fetchModule.fetch("http://10.0.2.2:8000/user_signup", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ 

           name: viewModel.get("name"),
           email:viewModel.get("email"),
           password:viewModel.get("password"),
        }).then(r => { return r.json(); }).then(function (r) {


   for(var i=0;i<r.length;i++){

       var goods={name:r[i].name}
       goodsList.push(goods);


   };
  console.log(goodsList);

}, function (e) {
         console.log("Error occurred " + e);
    });


    };

      return viewModel;
}

function handleErrors(response) {
    if (!response.ok) {
        console.log(JSON.stringify(response));
        throw Error(response.statusText);
    }
    return response;
}


function pageLoaded(args) {
        var page = args.object;
        pageData.set("goodsList", goodsList);

        page.bindingContext = pageData;
    }

module.exports = User;

List view

    <Page loaded="pageLoaded">
    <GridLayout>
        <ListView items="{{ goodsList }}">
            <ListView.itemTemplate>
                <Label text="{{ name }}" horizontalAlignment="left" verticalAlignment="center"/>
            </ListView.itemTemplate>
        </ListView>
    </GridLayout>
</Page>

Answer 1

Make your register() function return a promise which resolve the response from request. After that, there is NavigationEntry where you can pass the a context object (which is the response in this case) to the new page when using topmost().navigate

In User-view model.js:

viewModel.register = function() {
    return new Promise<any>((resolve, reject) => { 
        fetchModule.fetch("http://10.0.2.2:8000/user_signup", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ 

           name: viewModel.get("name"),
           email:viewModel.get("email"),
           password:viewModel.get("password"),
        }).then(r => { return r.json(); }).then(function (r) {


       for(var i=0;i<r.length;i++){
           var goods={name:r[i].name}
           goodsList.push(goods);
       };
    resolve(goodsList);
}, function (e) {
        reject(e);
});

Then in register.js:

function completeRegistration() {
    user.register()
        .then(function(result) {
            dialogsModule
                .alert("Your account was successfully created.")
                .then(function() {
                    frameModule.topmost().navigate({
                        moduleName: "view/list/list",
                        context: {goodsList: result}
                    });
                });
        }).catch(function(error) {
            console.log(error);
            dialogsModule
                .alert({
                    message: "Unfortunately we were unable to create your account.",
                    okButtonText: "OK"
                });
        });
}

then in the controller of the list page:

function pageLoaded(args) {
    var page = args.object;
    var context = page.navigationContext;
    page.bindingContext = context;
}