I think I am getting my keys, arrays, values and IDs mixed up here but can't seem to figure it out.
I want a way to get the current user in a ProfileCtrl controller. This is my current implementation using promises, $waitForAuth and once. But I am not sure if implementing currently.
var user = "";
var key = "";
var uids = Users.allUIDs();
console.log(uids);
Auth.$waitForAuth().then(function () {
var uid = Auth.$getAuth().uid;
console.log(uid);
for (var i = 0; i < uids.length; i++) {
console.log(uids[i].value().toString());
if (uids[i].value() == uid) {
var userKeyRef = new Firebase(firebaseUrl + uids + uids[i]);
userKeyRef.once('value').then(function(snapshot) {
key = snapshot.val();
}).then(function(){
user = new Firebase(firebaseUrl + users).child(key).val();
});
console.log(user);
console.log('User exists')
break;
}
}
$scope.user =user;
}).catch(function (error) {
console.log(error);
})
I do a check of the uids in an array, and if they match the authenticated user, I get the key from within the uids array and use that key to find the user object in the users array. Here is my database:
{
"uids" : {
"7d34fb85-813c-4586-857e-f062aed67f32" : {
"-KDQDk5vwJXmFngwI7iQ" : {
"registered" : true
}
}
},
"users" : {
"-KDQDk5vwJXmFngwI7iQ" : {
"email" : "random#gmail.com",
"firstname" : "Random",
"lastname" : "Person",
"uid" : "7d34fb85-813c-4586-857e-f062aed67f32"
}
}
}
For a clearer example, when I console.log the uids as it is returned from my service, it looks like:
Which means the uids are coming through?
Here is my code to get the uids:
app.factory('Users', ['$firebaseArray','$firebaseObject', 'Auth', function ($firebaseArray, $firebaseObject, Auth) {
var ref = new Firebase("https://urlformyapp.firebaseio.com");
var users = $firebaseArray(ref.child('users'));
var uids = $firebaseArray(ref.child('uids'));
return {
all: function () {
return users;
},
allUIDs: function () {
return uids;
},
get: function (id) {
// Simple index lookup
return users[id];
}
}
}])
Could someone tell me what is going wrong? Why does uids[i].value.toString() not print anything? Is there anything wrong with my code logic given the structure of my DB?
Related
This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 3 years ago.
I want to get the name from an array that is being generated from $http.get, however this is returning an empty array. When i do a console it see the array populated however when i loop inside the array to get the value of name property based on whether an id is equal to a certain, the array is empty.
In my controller i have a service call that shall return the name value.
var params = { Id: $scope.Id, SettingId: $scope.SettingId };
$scope.selectedUserName = helloService.getSelectedUserName($scope.UserId, params);
In my service
I have used the getUserList function to populate the list of user in a dropdown and it works by generating the array with the values.
However When i got another page , i want to be able to display the name of the selected user, so I wanted to use the same getUserList function to retrieve the name
this.getUserList = function (val) {
var usersObj = [];
var url = "/api/v1/hello/getusers";
var params = { Id: val.Id, SettingId: val.SettingId };
var config = { params: params };
var promise = $http.get(url, config)
.then(function (response) {
angular.forEach(response.data, function (key, value) {
angular.forEach(key, function (k, index) {
usersObj[index] = ({ userId: k.userId, name: k.name});
});
});
},
function errorCallback(response) {
console.log("Unable to perform get request");
throw response;
});
var usersList = usersObj;
return usersObj;
};
this.getSelectedUserName = function (id, param) {
var name = "";
var userList =this.getUserList(param);
angular.forEach(userList, function (value, key) {
if (value.userId == id)
name = value.name;
});
return name;
}
Array length is 0 but if i do a console.log(userList) before the loop , the array display the list of user data
this.getSelectedUserName = function (id, param) {
var name = "";
var userList =this.getUserList(param);
console.log(userList) ;
angular.forEach(userList, function (value, key) {
if (value.userId == id)
name = value.name;
});
return name;
}
Thank you for kind responses.
Please see screenshot
This is simple Javascript, not specific to Angular. You can do
userList.forEach(user => {
if(user.userId === id) {
name = user.name;
}
});
return name;
you can try like this.
here we are using a async await.
Service
this.getUserList = function (val) {
var usersObj = [];
var url = "/api/v1/hello/getusers";
var params = { Id: val.Id, SettingId: val.SettingId };
var config = { params: params };
return new Promise((resolve, reject) => {
$http.get(url, config)
.then(function (response) {
angular.forEach(response.data, function (key, value) {
angular.forEach(key, function (k, index) {
usersObj[index] = ({ userId: k.userId, name: k.name});
});
});
},
function errorCallback(response) {
console.log("Unable to perform get request");
throw response;
});
var usersList = usersObj;
resolve(usersObj);
});
};
this.getSelectedUserName = async function (id, param) {
var name = "";
var userList = await this.getUserList(param);
console.log(userList);
angular.forEach(userList, function (value, key) {
if (value.userId == id)
name = value.name;
});
return name;
}
let me know if it is working or not.
EDIT:
If you're only trying to match one id in the array of users you don't even need to loop:
anArray = source.filter(source => source.toLowerCase().indexOf(id) === 0);
or
anObject = source.find(obj => obj.id === id);
Which Angular version is this? Your tag denotes 2.+ but you have $scope there which is ng1.x
Why can't you use ngFor in your view since you already have your arrays. You don't need to sort them in the control.
component
this.getSelectedUserName = function (id, param) {
let name = ""; // should be array if you want to add unames to it
let userList = this.getUserList(param);
// what is `angular` here? And why loop here? Use ngFor in view.
angular.forEach(userList, function (value, key) {
if (value.userId == id){
name = value.name; // will be overwritten each time
// should be name.push(value.name); // but loop in view instead
}
});
// this.users = name; // for your original sorted version
this.users = userList;
}
In your view
<li *ngFor="let user of users; index as i;>
{{user.name}}
</li>
I am building a website over a database of music tracks. The database is as follows :
music table contains musicid and title
musicrights table contains musicid and memberid
members table contains memberid and memberinfo.
I'm trying to build an array of objects in my database service, which each entry represents a track containing its rightholders (contains information aubout one rightholder but not his name) and their member info (contains name etc). The backend is sailsjs and the code is as follows :
angular.module("myapp").service("database", ["$q", "$http", function($q, $http) {
var database = {};
function getHolderMember(rightHolder) {
return ($http.get("/api/members?where=" + JSON.stringify({
memberid: rightHolder.memberid
})).then(function (res) {
rightHolder.member = res.data[0];
return (rightHolder);
}));
}
function getRightHolders(doc) {
return ($http.get("/api/musicrights?where=" + JSON.stringify({
musicid: doc.musicid
})).then(function(res) {
// array of promises :
// each rightholder of a document has to solve member info
var rightHolders = [];
for (var i in res.data) {
var rightHolder = {
member: res.data[i].memberid,
type: res.data[i].membertype,
rights: res.data[i].memberrights
};
rightHolders.push(getHolderMember(rightHolder));
}
return ($q.all(rightHolders));
}).then(function(rightHolders) {
// expected array of one or two rightholders,
// enriched with member information
// actually returns array of one or two arrays of 30 members
// without rightholder info
console.log(rightHolders);
doc.rightHolders = rightHolders;
return (doc);
}));
}
database.music = function(q) {
return ($http.get("/api/music?where=" + JSON.stringify({
or: [{
title: {
contains: q
}
}, {
subtitle: {
contains: q
}
}]
})).then(function(res) {
// array of 30 promises :
// each one of 30 documents has to resolve its rightholders
var documents = [];
for (var i in res.data) {
documents.push(getRightHolders(res.data[i]));
}
return ($q.all(documents));
}));
}
return (database);
}]);
The first array of promises seems to work as expected, but not the second one in getRightHolders. What is strange is that this function returns an array of one or two promises, which are rightHolders waiting for their memberinfo. But in the callback where I console.log the response, i get an array of one or two (as per the number of pushed promises) but this array's elements are arrays of 30 memberinfo instead of one memberinfo. I don't understand how this $q.all() call gets mixed with the previous-level $q.all.
The data structure is roughly like this
documents [ ] ($http => 30 responses)
music.musicid
music.rightHolders [ ] ($http => 1, 2, 3 responses)
rightholder.rights
rightholder.member ($http => 1 response)
member.memberinfo
Any help appreciated. Thank you !
UPDATE : Thank you for your answer, it worked like a charm. Here's the updated code, with also the migrate service which formats data differently (there is some database migration going on). I kept it out of the first example but your answer gave me this neat syntax.
angular.module("myApp").service("database", ["$q", "$http", "migrate", function($q, $http, migrate) {
var database = {};
function getHolderMember(rightHolder) {
return ($http.get("/api/members?where=" + JSON.stringify({
memberID: rightHolder.member
})).then(function(res) {
return (migrate.member(res.data[0]));
}).then(function(member) {
rightHolder.member = member;
return (rightHolder);
}));
}
function getRightHolders(doc) {
return ($http.get("/api/rightHolders?where=" + JSON.stringify({
musicID: doc.musicID
})).then(function(res) {
return (
$q.all(res.data
.map(migrate.rightHolder)
.map(getHolderMember)
)
);
}).then(function(rightHolders) {
doc.rightHolders = rightHolders;
return (doc);
}));
}
database.music = function(q) {
return ($http.get("/api/music?where=" + JSON.stringify({
or: [{
title: {
contains: q
}
},
{
subtitle: {
contains: q
}
}
]
})).then(function(res) {
return (
$q.all(res.data
.map(migrate.music)
.map(getRightHolders)
)
);
}));
}
return (database);
}
I'm not quite sure how you're getting the result you describe, but your logic is more convoluted than it needs to be and I think this might be leading to the issues you're seeing. You're giving the getRightsHolders function the responsibility of returning the document and based on your comment above, it sounds like you previously had the getHolderMember() function doing something similar and then stopped doing that.
We can clean this up by having each function be responsible for the entities it's handling and by using .map() instead of for (please don't use for..in with arrays).
Please give this a try:
angular
.module("myapp")
.service("database", ["$q", "$http", function($q, $http) {
var database = {};
function getHolderMember(memberId) {
var query = JSON.stringify({ memberid: memberid });
return $http.get("/api/members?where=" + query)
.then(function (res) {
return res.data[0];
});
}
function populateRightsHolderWithMember(rightsHolder) {
return getHolderMember(rightsHolder.memberid)
.then(function (member) {
rightsHolder.member = member;
return rightsHolder;
});
}
function getRightHolders(doc) {
var query = JSON.stringify({ musicid: doc.musicid });
return $http.get("/api/musicrights?where=" + query)
.then(function(res) {
return $q.all(res.data.map(populateRightsHolderWithMember));
});
}
function populateDocumentWithRightsHolders(document) {
return getRightsHolders(document)
.then(function(rightsHolders) {
document.rightsHolders = rightsHolders;
return document;
});
}
database.music = function(q) {
return $http.get("/api/music?where=" + JSON.stringify({
or: [{
title: {
contains: q
}
}, {
subtitle: {
contains: q
}
}]
})).then(function(res) {
return $q.all(res.data.map(populateDocumentWithRightsHolders));
});
}
return (database);
}]);
I have been experimenting with various ways to obtain the current user profile from a database, just like I used to use session_start() in PHP to get all the variables I need.
Here is my data structure:
{
"users" : {
"7fb5c5fd-34fe-47da-b5e9-f8faa23aea1c" : {
"email" : "bl#bt.com",
"firstname" : "bla",
"lastname" : "bear",
"uid" : "7fb5c5fd-34fe-47da-b5e9-f8faa23aea1c"
},
"d4d3e89f-ad51-4206-b347-e8273e2cbd78" : {
"email" : "hey#t.com",
"firstname" : "dfads",
"lastname" : "dfsda",
"uid" : "d4d3e89f-ad51-4206-b347-e8273e2cbd78"
}
}
}
And here is my Auth factory which does things like log out, store the current user profile as an object and so on.
app.factory('Auth', ['rootRef', '$firebaseObject','$firebaseAuth', function (rootRef, $firebaseObject,$firebaseAuth) {
var auth = $firebaseAuth(rootRef);
var user = new $firebaseObject;
auth.$onAuth(function (authData) {
if (authData) {
angular.copy(authData, user);
// Set the profile
user = $firebaseObject(rootRef.child('users').child(authData.uid));
user.$loaded().then(function (user) {
$window.localStorage['uid'] = user.uid.toString();
$window.localStorage['profile'] = user;
console.log('Window storage uid is' + $window.localStorage['uid']);
});
} else {
if (user!=null) {
user.$destroy();
}
}
});
return {
user: user,
login: function (user) {
return auth.$authWithPassword({
email: user.email,
password: user.password
})
},
logout: function(auth) {
return auth.$unauth;
},
signedIn: function (user) {
return !!user.provider;
}
}
}]);
What I want to do is load the profile data of the user when they log in to a profile page, so we see the first name, last name and other things we stored when they first signed in and we stored these variables in the users array.
But I am getting:
ionic.bundle.js:25642 TypeError: Cannot read property 'ref' of undefined
I previously tried to solve this problem by using $rootScope.user and by using my LoginCtrl and saying:
Auth.$onAuth(function (AuthData) {
if (AuthData === null) {
console.log("Not logged in yet");
} else {
var uid = Auth.$getAuth().uid;
var user = new Firebase(FirebaseUrl).child(users).child(uid).val();
user.$loaded().then(function (profile) {
$rootScope.user= profile;
})
});
}
}
}
And then
$scope.user = $rootScope.user;
This worked, but when I hard refreshed the browser the $rootScope object became null.
Any ideas how I can best achieve what I am trying to do, and most importantly where I should put each part of code given what my data structure?
I'm searching through clients invoices
These invoices are stored within the client json.
so...
clients: {
... : {
invoices: {
},
},
}
I'm doing this by this:
var ref = new Firebase(fbUrl+'/clients/'+client+'/invoices/');
ref.on("value", function(snapshot) {
var list = snapshot.val();
angular.forEach(list, function(item) {
if(item.settings.number == id)
{
console.log(item.id());
invoice.details = item;
}
})
});
Inside the "if" how do I get the unique id auto generated by Firebase? In your html your able to do $id typically.
Once you call snapshot.val(), you're just dealing with a Javascript object. See the documentation for angular.forEach. You just need to specify a second argument to the function.
angular.forEach(list, function(item, key) {
...
});
I need a lookup function to be used throughout my application that gets additional data when provided with an id.
My attempt was to create a service:
angular.module("myApp")
.factory("userResource", function($resource) {
return $resource("/api/users");
})
.service("usernameLookup", function(userResource) {
var query = userResource.query(function (data) {
var users = data;
};
return function (userId) {
// EDIT
// How could I wait here until users is populated (and cached) the
// first time this function is used?
var user = { userId: 0, username: "Unknown user" }
for (var i = 0; i < users.leng;th; i++) {
if (users[i].id == userId)
{
user = users[i];
break;
}
}
return user;
};
})
.controller("pageCtrl", function(usernameLookup) {
var vm = this;
vm.userList = [
{ userId: 0 },
{ userId: 1 }
];
for (var i = 0; i < userList.length; i++)
{
userList[i].username = usernameLookup(userList[i].userId);
}
});
(Code compressed and de-minification-proofed for brevity)
I know this is wrong since the users array might not be populated when the actual lookup happens, but I don't know how to make sure it is.
Any suggestions?
Make the users variable part of the service function:
.service("usernameLookup", function(userResource) {
var users = [];
var query = userResource.query(function (data) {
users = data;
};
What I ended up doing was:
angular.module("myApp")
.factory("userResource", function($resource) {
return $resource("/api/users");
})
.factory("usernameLookup", function(userResource) {
return function (user) {
var users = userResource.query(function () {
for (var i = 0; i < users.length; i++) {
if (users[i].id == user.userId)
{
user.username = users[i].username;
break;
}
}
}
};
})
.controller("pageCtrl", function(usernameLookup) {
var vm = this;
vm.administratorsOrSomething = [
{ userId: 0 },
{ userId: 1 }
];
for (var i = 0; i < administratorsOrSomething.length; i++) {
usernameLookup(administratorsOrSomething[i]);
}
});
I'm guessing this is more the JavaScript/AngularJS spirit of things which isn't always obvious for a c/++/# guy.
A working example with mock resources, faked latency etc can be found here
The simplest solution might just be to use scope.$watch, updating the user list whenever it changes. If you find this distasteful (too many $watch expressions can get messy), you can create a userListPromise and only call your usernameLookup when the promise resolves. I can give more specific advice if you show me how the userList is populated, but these should be starting points.
Edit: I think I see what you want now. I still think your best option is to return a promise. I know that sounds like a pain, but it's really not that bad. Plus, when you're relying on web requests to get your data you really can't guarantee you won't end up with a 500 or 404 if the server explodes. A robust SPA needs to assume that any web request might not work. So here is a starting point; note that I don't handle the case when the query promise is rejected.
angular.module("myApp")
.factory("userResource", function($resource) {
return $resource("/api/users");
})
.service("usernameLookup", function(userResource, $q) {
var query = userResource.query(function (data) {
var users = data;
};
return function (userId) {
return query.$promise.then(function(users){
var user = { userId: 0, username: "Unknown user" }
for (var i = 0; i < users.leng;th; i++) {
if (users[i].id == userId)
{
user = users[i];
break;
}
}
return user;
});
};
})
.controller("pageCtrl", function(usernameLookup) {
var vm = this;
vm.userList = [
{ userId: 0 },
{ userId: 1 }
];
for (var i = 0; i < userList.length; i++)
{
userList[i].username = usernameLookup(userList[i].userId);
}
});