How to use Promise in Service AngularJS? Sample Data Firebase - javascript

Here is my service.js file:
angular.module('starter.services', [])
.factory('firebaseData', function() {
return {
refUserFacebook: function (userUid) {
var firebaseRef = new Firebase("https://sweltering-heat-772.firebaseio.com/users/");
var user;
firebaseRef.once('value', function(dataSnapshot) {
var users = dataSnapshot.val();
var userKeys = Object.keys(users);
for (var i = 0, len = userKeys.length; i < len; i ++){
if (users[userKeys[i]].uid == userUid){
user = users[userKeys[i]];
}
}
console.log(user);
return user;
});
}
}
})
Here is my controller file name item.js file
angular.module('starter.controllers.item', [])
.controller('ItemCtrl', function($scope, firebaseData) {
var ref = firebaseData.ref();
var userUid = ref.getAuth();
var user = firebaseData.refUserFacebook(userUid.uid);
console.log(user);
})
Of course I'll get undefined in the item.js controller first, and user in service return after.
I'd really like to use Promise technology in my controller, to return user value from the service.
In item.js file, it would be something like:
firebaseData.refUserFacebook(userUid.uid).then(function(user){
console.log(user); //Promise after retrieving value from service.js
});
Any helps would be appreciated.
Thanks

Next time you should provide at least some code of your attempt... but here's what you want:
angular.module('starter.services', [])
.factory('firebaseData', function($q) {
return {
refUserFacebook: function (userUid) {
var firebaseRef = new Firebase("https://sweltering-heat-772.firebaseio.com/users/");
var user;
var deferred = $q.defer();
firebaseRef.once('value', function(dataSnapshot) {
var users = dataSnapshot.val();
var userKeys = Object.keys(users);
for (var i = 0, len = userKeys.length; i < len; i ++){
if (users[userKeys[i]].uid == userUid){
user = users[userKeys[i]];
}
}
console.log(user);
deferred.resolve(user);
});
return deferred.promise;
}
}
})

Related

Unable to return result from promise

I am trying to read some data from 2 different tables and parse a CSV file before rendering an ejs file.
I can get the data from both tables and from the CSV file but I seem to be unable to return the result.
Pretty sure this is a problem with the way I handle async execution but I fail to see what I am doing wrong.
I've spent the last 2 days reading about this (including the threads around here) and browsing but somehow the answer still escapes me.
First file - usercms.js
app.get('/userscms', function(req, res)
{
existingUsers.getExistingUsers()
.then(function(appUsers)
{
//global users array
//I can display these in my ejs file
globalAppUsers = appUsers;
})
.then(existingUsersAttributesQlik.getExistingUsersAttributesQlik())
.then(function(usersQlikAttributes)
{
//global user attributes array
//undefined data
globalUsersQlikAttributes = usersQlikAttributes;
})
.then(existingSuppliers.parseSuppliersCSV())
.then(function(supplierData)
{
//the result I am expecting
//this prints undefined
console.log(supplierData);
}).then(function()
{
res.render('userscms.ejs',
{
users: globalAppUsers,
attributes: globalUsersQlikAttributes
});
});
});
Second function - getxistingUsers.js (identical to the getExistingUsersAttributesQlik, except for the query)
var userData = [];
var appUsers = [];
(function (exports)
{
exports.getExistingUsers = function ()
{
return promisemysql.createConnection(dbconfig.development).then(function(conn)
{
var result = conn.query("SELECT id, username, firstName, lastName, email, phone, lastLogin, isAdmin, isValid, isPhoneValid, accountCreationDateTime FROM Users");
conn.end();
return result;
}).then(function(rows)
{
return rows;
}).then(function(rows)
{
if (rows.length)
{
userData = [];
appUsers = [];
rows.forEach(function (elem)
{
userData.push(_.toArray(elem));
});
for (i = 0; i < userData.length; i++)
{
var appUser = new appUserModel.AppUser(
userData[i][0],
userData[i][1],
userData[i][2],
userData[i][3],
userData[i][4],
userData[i][5],
userData[i][6],
userData[i][7],
userData[i][8],
userData[i][9],
userData[i][10]);
appUsers.push(_.toArray(appUser));
}
return appUsers;
}
else
{
console.log("NOPE");
return null;
}
}).then(function(appUsers)
{
console.log(appUsers);
return appUsers;
});
};
})(typeof exports === 'undefined' ? this['getExistingUsers'] = {} : exports);
Third file - parseSuppliersCSV.js
var supplierData = [];
var suppliersData = [];
var csvCount = 0;
(function (exports)
{
exports.parseSuppliersCSV = function ()
{
return new Promise(function(resolve, reject)
{
var fileStream = fs.createReadStream("myCSV.csv");
var parser = fastCsv();
csvCount = 0;
supplierData = [];
suppliersData = [];
fileStream
.on("readable", function ()
{
var data;
while ((data = fileStream.read()) !== null)
{
parser.write(data);
}
})
.on("end", function ()
{
parser.end();
});
parser
.on("readable", function ()
{
var data;
while ((data = parser.read()) !== null)
{
if(csvCount >= 1)
{
csvCount++;
var arrayOfStrings = data[0].split(';');
var supplier = new supplierModel.Supplier(arrayOfStrings[0],arrayOfStrings[1]);
suppliersData.push(_.toArray(supplier));
}
else
{
csvCount++;
}
}
})
.on("end", function ()
{
console.log("done");
//all OK here
console.log(suppliersData);
//this doesn't seem to return anything
return suppliersData;
});
});
};
})(typeof exports === 'undefined' ? this['parseSuppliersCSV'] = {} : exports);
Any ideas what I am doing wrong? Am I approaching this the wrong way?
I'll take a guess here and assume the promise you created should resolve to something...instead of returning a value.
.on("end", function ()
{
console.log("done");
//all OK here
console.log(suppliersData);
//this doesn't seem to return anything
return resolve(suppliersData);
});

How to remove and edit object from cookies in angularjs

I have a problem with remove and edit cookie object from $cookies in angularjs. I want to make a shop and I am adding products to $cookies global variable with putObject function (I didn't use put because I have more than one argument). I want to add function to remove and edit product from shop and remove and edit only one object from cookie. Please help me!
Here is a fragment of my code (I want to remove/edit object from 'products' cookie):
app.controller('Store', ['$scope', '$cookies', 'x2js', '$http',
function($scope, $cookies, x2js, $http){
this.products = $cookies.getObject('products');
if(!this.products) {
var self = this;
$http.get('assets/xml/products.xml').success(function(data) {
self.products = data.products.product;
for(var i = 0; i < self.products.length; i++) {
self.products[i].id = parseInt(self.products[i].id);
self.products[i].netto = self.products[i].netto + '.00';
self.products[i].tax = parseInt(self.products[i].tax);
self.products[i].brutto = parseFloat(self.products[i].brutto);
self.products[i].rating = parseInt(self.products[i].rating);
};
});
}
$scope.product = $cookies.getObject('product') || {};
$scope.$watch('product', function() {
$cookies.putObject('product', $scope.product);
}, true);
this.addProduct = function() {
if(this.countCategories() >= 2) {
if(this.validateForm()) {
var product = {
id: this.products.length + 1,
name: $scope.product.name,
code: $scope.product.code,
image: $scope.product.image,
netto: this.intToFloat($scope.product.netto, 2),
tax: $scope.product.tax,
brutto: this.calculatePriceBr(),
rating: parseInt(this.ratingChecked()),
category: this.categoryChecked(),
option: this.optionChecked(),
selected: $scope.product.selected
};
this.products.push(product);
$scope.product = {};
$cookies.putObject('products', this.products);
$('#product-add').modal('hide');
return true;
} else {
return;
}
} else {
return;
}
};
})();
Hope this is what you are looking for.
I've made a little test based on your code (simplified):
var app = angular.module('myApp', ['ngCookies']);
app.controller('Store', Store);
Store.$inject = ['$scope', '$cookies', '$http'];
function Store($scope, $cookies, $http) {
var vm = this;
vm.products = [];
vm.cart = [] ;
vm.inCookie =[];
$http.get('products.xml').success(function(data) {
vm.products = data;
for (var i = 0; i < vm.products.length; i++) {
vm.products[i].id = parseInt(vm.products[i].id);
vm.products[i].netto = vm.products[i].netto + '.00';
vm.products[i].tax = parseInt(vm.products[i].tax);
vm.products[i].brutto = parseFloat(vm.products[i].brutto);
vm.products[i].rating = parseInt(vm.products[i].rating);
};
});
this.addProduct = function(row) {
vm.cart.push(row);
$cookies.put('cart', JSON.stringify(vm.cart));
vm.inCookie = JSON.parse($cookies.get('cart'));
};
}
You can see here how to add and retrieve data from a cookie.
In this plunkr you can see it working.
https://plnkr.co/edit/ew1ePjzbMxjAqtgx8hzq?p=preview
Hope this helps.
Regards!

meteor: conditional subscription in template level

i reuse the same template in other route with different data argument but using the same publication...
if i do normal pub/sub, the data being published as expected. but when i do conditional pub/sub like below, i fail to subscribe the data. console log return empty array,,,
server/publication.js
Meteor.publish('ACStats', function(cId, uId) {
var selectors = {cId:cId, uId:uId};
var options = {
fields: {qId:0}
};
return ACStats.find(selectors,options);
});
client/onCreated
Template.channelList.onCreated(function() {
this.disable = new ReactiveVar('');
if (FlowRouter.getRouteName() === 'profile') {
var self = this;
self.autorun(function() {
var penName = FlowRouter.getParam('penName');
var u = Meteor.users.findOne({slugName:penName});
if (u) {var uId = u._id;}
Meteor.subscribe('ACStats', null, uId);
});
} else{
var self = this;
self.autorun(function() {
var channelName = FlowRouter.getParam('channel');
var c = Channels.findOne({title:channelName});
if (c) {var cId = c._id;}
Meteor.subscribe('ACStats', cId, null);
});
}
});
console
ACStats.find().fetch() //return empty array
anyone have figured out my mistake ..??
thank You so much....
You can make two publications:
Meteor.publish ('ACStatsChannels', cId, function() {
});
Meteor.publish ('ACStatsUsers', uId, function() {
})
And then subscribe like this:
Template.channelList.onCreated(function() {
this.disable = new ReactiveVar('');
var self = this;
self.autorun(function() {
if (FlowRouter.getRouteName() === 'profile') {
var penName = FlowRouter.getParam('penName');
self.subscribe('ACStatsUsers', penName);
} else {
var channelName = FlowRouter.getParam('channel');
self.subscribe('ACStatsChannels', channelName);
}
});
});

Can't angular.copy to variable outside of function

I cannot seem to set my product variable properly from within my getProduct() function...
If I console.log(product) immediately after angular.copy(products.data[i], product);, it is set there correctly, however I cannot figure out why var product = {}; on line 3 remains an empty object.
Any ideas what is going?
angular.module('APP').factory('productFactory', function($q, $http) {
var products = [];
var product = {};
var getAllProducts = function(){
return $http.get('./data/product.json')
.then(function(response) {
angular.copy(response, products);
var deferred = $q.defer();
deferred.resolve(response);
return deferred.promise;
});
};
var getProduct = function(id) {
getAllProducts()
.then(function(){
for (var i = products.data.length - 1; i >= 0; i--) {
if(products.data[i].id == id){
angular.copy(products.data[i], product);
}
};
})
};
return {
getAllProducts: getAllProducts,
getProduct: getProduct,
products: products,
product: product
};
})

Moving code into a factory in an Angular app

I am trying to clean up a controller that has too many lines of code in it. In the controller below where you find a function called getProductDetails, I would like to move the filter to a factory or a service, but I am not sure how to do it.
'use strict';
(function () {
var userQuoteBuild = angular.module('priceApp');
userQuoteBuild.controller('quoteBuilderController', function ($scope, $http) {
// loads of controller logic here...
$scope.getProductDetails = function (item) {
$scope.listOfProductVariants = item.default_variant_attributes;
// TODO: put this in its own factory?
$scope.selectedProductAttributes = $scope.listOfAttributes.filter(function (item) {
var validated = false, i, length = $scope.listOfProductVariants.length;
for (i = 0; i < length; i++) {
if (item.name === $scope.listOfProductVariants[i]){
validated = true;
}
}
return validated;
});
};
});
(function () {
'use strict';
angular
.module('priceApp')
.factory('filterService', filterService);
function filterService() {
var service = {
getValidated: getValidated
}
return service;
function getValidated(list, variants) {
return list.filter(function (item) {
var validated = false, i, length = variants.length;
for (i = 0; i < length; i++) {
if (item.name === variants[i]) {
validated = true;
}
}
return validated;
});
}
}
})();
Simply inject this filterService to your controller and then use it as in example here:
$scope.selectedProductAttributes = filterService
.getValidated($scope.listOfAttributes,
$scope.listOfProductVariants)
I followed John Papa's AngularJS Style Guide. Make sure to choose a better name than filterService. : )
Check this:
userQuoteBuild.factory('myService', function() {
var service = {
getProductDetails: function(item) {
// your logic
return value;
}
}
return service;
});

Categories