API integration data sticking to only one page and I am unable to access it from other pages .!


#1

Hi,

I am creating a ‘data-model’ for api calls and I am calling the the functions(which contains api calls) from ‘page1.js’ and storing the data in ‘data-model’. in page1 the data binding to the view perfectly but
the problem is I am unable to access the data from ‘page2.js’.
Here is my code
Please let me know am I doing something wrong or is there any alternative method which meet my requirement

dataModel.js

function Datamodel() {
var viewModel = new observableModule.fromObject({
videosData: new ObservableArray([]),
})

viewModel.getVideos = function() {
var videosGetData = {
“apiName”: “getPosts”,
“method”: “GET”,
“queryParams”: [{‘name’: ‘post_type’, ‘value’: ‘videos’}],
“apiType”: “aquaInfo”
};
return serverCommunication.makeHttpRequest(videosGetData).then(function(response){
response.posts.forEach(function(v, i) {
iconObj = commonModule.getIconObj();
v.shareIcon= iconObj.shareIcon;
v.timeIcon = iconObj.timeIcon;
v.playIcon = iconObj.playIcon;
viewModel.videosData.push(v);
})
return viewModel.videosData;
}, function(err) {
});
}
}

module.exports = Datamodel;

page1.js

var dataModelView = require("~/shared/DataModel");
var dataModel = new dataModelView();

exports.pageLoader = function(){
dataModel.getVideos()
.then(function(data) {
//console.log(“videos then function executed”);
}, function(failure) {
}).catch(function(error) {
//console.log("videos error "+error);
});
}

page2.js

var dataModelView = require("~/shared/DataModel");
var dataModel = new dataModelView();

videosPage.prototype.loaded = function(args) {
page = args.object;
page.bindingContext = dataModel;
}


#2

Hi @sagar1911
You would want to pass the dataModel from page 1 to page 2,
in the navigationContext like this,

const navigationEntry = {
    moduleName: "<path to page 2>",
    context: {data: dataModel}
};
frameModule.topmost().navigate(navigationEntry);

then in the loaded method of page2,

function loaded(args) {
    var page = args.object;
    dataModel = page.navigationContext.data;
}

Do this instead of creating a new instance of the view model on page 2


#3

yay @multishiv19, I would have done that but I have a side drawer to navigate between the pages so, there is no guarantee that the user navigate to page2 from only page1 he may go to page2 from any page.


#4

then you would want to create a service, that always returns the same instance of the viewModel.
As in the creation of the viewModel happens inside the service,
and it stores this viewModel within itself,

next time when it is required in another file, you will get the same instance of the viewModel.


#5

Service !!
Can u give me any source link ?? So that I can read and implement it


#6

a service is simply a js file,

const ObservableArray = require("data/observable-array").ObservableArray;

const YourSingleton = (function() {
    const yourVm = null;

    function createInstance(<receive optional param>) {
        // write creation logic
        // do something with arguments passed
        yourVm = new ObservableArray([<set up your vm>]);
    }

    return {
        getInstance: function(<pass optional param>) {
            if (!yourVm) {
                yourVm = createInstance(<use optional param>);
            }

            return yourVm;
        }
    };
})();

module.exports = YourSingleton;