AngularJS + Firebase - Scope not updating when getting remote data - javascript

I've been working on the problem for about a week now with no progress. I have an array of data that's available to my $scope. I iterate through it like this:
<div ng-repeat="device in myData">
<label>{{processor(device.$id)}}</label>
</div>
The data contains only a Firebase $uid. And I want to make a second request to the database to get information thats associated with this $uid and place it as the label's content. I thought I could use an angular expression with a function to pass in the Firebase $uid and return some data.
I declare this $scope function:
$scope.processor = function(uid) {
function getDeviceInfo(callback) {
_.child('device/' + uid).once('value', function(snapshot) {
callback(snapshot.val())
})
}
getDeviceInfo(function(data) {
console.log(data)
return data
})
}
Basically I call the processor($id) in my scope, passing in the uid I want to lookup. The function getDeviceInfo() runs and has a callback, when the data is returned, I log it to the console, which works perfect, all the data is there. But then when I try and return a value to the $scope, it doesn't update.
I've tried about every combination of Angular/AngularFire code available and haven't gotten anything to work, any ideas?

If the function that you pass as a parameter to the once function is executed asynchronous, you can't return the data from the processor function.
The best you can do is to add the resulting data to the device object or to create another object to hold all the data for all the devices.
Try this:
<div ng-repeat="device in myData">
<label>{{device.data}}</label>
</div>
$scope.processor = function(device) {
_.child('device/' + device.$id).once('value', function(snapshot) {
device.data = snapshot.val();
});
}
}
$scope.myData.forEach($scope.processor);
Or this:
<div ng-repeat="device in myData">
<label>{{deviceData[device.$id]}}</label>
</div>
$scope.deviceData = {};
$scope.processor = function(device) {
_.child('device/' + device.$id).once('value', function(snapshot) {
$scope.deviceData[device.$id] = snapshot.val();
});
}
}
$scope.myData.forEach($scope.processor);
If that function is not asynch you can return the data using something like this:
$scope.processor = function(uid) {
var data = undefined;
_.child('device/' + uid).once('value', function(snapshot) {
data = snapshot.val()
})
return data
}
reference

Your function is not returning anything. Try this:
$scope.processor = function(uid) {
function getDeviceInfo(callback) {
_.child('device/' + uid).once('value', function(snapshot) {
callback(snapshot.val())
})
}
return getDeviceInfo(function(data) {
console.log(data)
return data
})
}
This seems overcomplicated though, why not do this?
$scope.processor = function(uid) {
return _.child('device/' + uid).once('value', function(snapshot) {
return callback(snapshot.val());
})
}

Check whether you have multiple instances of the same controller in your application. I made the same mistake a couple of times. I had ngRoute instantiating the controller using
app.config(function($routeProvider) {
$routeProvider
.when('/', {
// template : 'NIIIIICE',
templateUrl : 'pages/enquiries.html',
controller : 'firstcontroller'
});
});
Then I mistakenly created another instance of the SAME controller inside the HTML like:
ng-controller="firstcontroller as fctrl"
When I call $apply() it would only apply to child instance and that made it seem as if it wasn't working....So yeah long story short make sure you are running $apply in the same instance. :)

Related

Angular loading data from server json

Can someone tell me whats the best solution to use jsonObjects in ng repeat?
My code is as follows:
My PHP response is this:
die(json_encode(array('sts'=>'success', 'title'=>'*****', 'msg'=>'*******', 'data'=>$result)));
My angular.js the service is like this:
LeadApp.service('LeadsService', function ($http) {
var AllLeads = {
async: function() {
var promise = $http({
url: '../app/ServerData.php',
method: "POST",
params: { req_id: 'leads' }
}).then(function (response) {
return response.data;
});
return promise;
}
};
return AllLeads;
});
Then in my controller i call the service and set a lead var to use in my view with ng repeat: My Data is being loaded i assured already. I attached a pic of the console log from below. But somehow the ng repeat just wont work like expected... What am i doing wrong? There is no error!
....
LeadsService.async().then(function (d) {
this.leads = d.data;
console.log(this.leads);
this.list_all = this.leads;
Here is the main ng repeat part in the view (custom ng repeat with "dir-paginate"):
...
<div class="widget-content leads_list" ng-controller="leadsController as leads">
<tr dir-paginate="lead in leads.list_all | orderBy:sortKey:reverse | filter:search | itemsPerPage:15" pagination-id="leads.list_all">
<td scope="row">{{lead.id}}</td>
...
You need to bind the this context outside then method.
Since you are using ng-controller="leadsController as leads", it would be wise to bind to the variable leads.
var leads = this;
LeadsService.async().then(function (d) {
leads.list_all = d.data;
console.log(leads.list_all);
});
The this context inside the then method is not the same as the this context outside the then method. Also binding to the same name that you use in your template helps to avoid confusion.
this is not the controller in that callback function context. So you need to assign this to a variable in the controller.
var ctrl = this;
LeadsService.async().then(function (d) {
ctrl.leads = d.data;
console.log(ctrl.leads);

Can't pass data between controllers?

I don't get what I'm doing wrong, I am trying to globally store and pass data from one controller to another via a service. I stored the data in one controller and confirmed that it was stored at the beginning of my buildReportController. Then, when I click a button on my UI, it opens reportResultsController. However, issue is, I can store the data correctly in buildReportController via locationHistoryService.store() but when I go to reportResultsController and calllocationHistoryService.get(), thepreviousLocationvariable inlocationHistoryService` is empty as if the data was never set. Any ideas on how why or how I can "globally" store data and pass it between controllers? Below is my attempt. Thanks!
In reportView.js
angular.module('reportView', [])
.service('locationHistoryService', function(){
var previousLocation = "";
return {
store: function(location){
previousLocation = location;
},
get: function(){
return previousLocation;
}
};
});
In buildReport.js
angular.module('buildReport', ['reportView'])
.controller('buildReportController', ['$rootScope', 'locationHistoryService'], function($rootScope, locationHistoryService){
$rootScope.$on('$locationChangeSuccess', function(e, newLocation, oldLocation){
locationHistoryService.store(oldLocation);
console.log("Old location: ", oldLocation);
});
}
In reportResults.js
angular.module('reportResults', ['reportView'])
.controller('reportResultsController', ['$rootScope', 'locationHistoryService'], function($rootScope, locationHistoryService){
console.log("location : ", locationHistoryService.get());
}
The locationHistoryService.get() method in reportResults.js is called before it is set in buildReport.js.
It would be better if you announce when the previousLocation variable has been set.
In reportView.js
angular.module('reportView', [])
.service('locationHistoryService',['$rootScope'] ,function($rootScope){
var previousLocation = "";
return {
store: function(location){
previousLocation = location;
$rootScope.$broadcast('previous-location-set');
},
get: function(){
return previousLocation;
}
};
});
In reportResults.js
angular.module('reportResults', ['reportView'])
.controller('reportResultsController', ['$rootScope', 'locationHistoryService'], function($rootScope, locationHistoryService){
$rootScope.$on('previous-location-set', function(){
console.log("location : ", locationHistoryService.get());
});
}
Your webapp should have only one module which is automatically bootstrapped by angular, and other modules as dependencies. The syntax of writing service is incorrect. You wrote .service but returning object which .factory should return. Here is working example of your code http://codepen.io/Chyngyz/pen/NxbdpW?editors=101
Also you wrote the safe for minification syntax of controllers incorrect, the function block of controller should be the last item in the array.

Build simple cache in Angularjs service for data provide from http request which return object reference

I want build some simple cache in Angularjs service for data provide from http request. Additional I want always get reference to the same object. I prepare example code to illustrate my thinking and problem which I have now.
jsfiddle code illustrate problem
I have service UsersModel which provide me user from http request.This user data are shared between controllers. So want to have always reference to same data. I add to him simple logic. Before UsersModel.getUsers() call service check if exist any data from previous call, if exist return him, if not do a http request. I inject that service in tree controller. In first two controllers UsersModel.getUsers() is call immediately after page load. In last after click on button.
Problem is when two first controller call UsersModel.getUsers() in the same time. Then any cached data don't exist and both do http request After that I have in first two controller reference to different user objects. We can see this clicking on load button.
And now my question. How to make this work for the simultaneous first call UsersModel.getUsers() and always have reference to the same object data.
app.js
var APP = angular.module('APP', []);
APP.SidebarCtrl = function ($scope, UsersModel) {
var sidebarCtrl = this;
UsersModel.getUsers()
.then(function (users) {
sidebarCtrl.users = users;
});
};
APP.ContentCtrl = function ($scope, UsersModel) {
var contentCtrl = this;
UsersModel.getUsers()
.then(function (users) {
contentCtrl.users = users;
});
};
APP.FootCtrl = function ($scope, UsersModel) {
var footCtrl = this;
function load() {
UsersModel.getUsers()
.then(function (users) {
footCtrl.users = users;
});
}
footCtrl.load = load
};
APP.service('UsersModel', function ($http, $q) {
var model = this,
URLS = {
FETCH: 'http://api.randomuser.me/'
},
users;
function extract(result) {
return result.data.results['0'].user.email;
}
function cacheUsers(result) {
users = extract(result);
return users;
}
model.getUsers = function () {
return (users) ? $q.when(users) : $http.get(URLS.FETCH).then(cacheUsers);
};
});
Index.html
<div ng-app="APP">
<div ng-controller="APP.SidebarCtrl as sidebarCtrl">
<h1>{{ sidebarCtrl.users }}</h1>
</div>
<div ng-controller="APP.ContentCtrl as contentCtrl">
<h1>{{ contentCtrl.users }}</h1>
</div>
<div ng-controller="APP.FootCtrl as footCtrl">
<h1>{{ footCtrl.users }}</h1>
<button ng-click="footCtrl.load()" type="button">Load</button>
</div>
</div>
jsfiddle code illustrate problem
You can modify your functions as follows:
function cacheUsers(result) {
return (users) ? users : users = extract(result);
}
and
model.getUsers = function () {
return (users) ? $q.when(users) : $http.get(URLS.FETCH, {cache: true}).then(cacheUsers);
};
It provides additional cache check after fetch and enables built-in cache for the object.
I suggest you to read http://www.webdeveasy.com/angularjs-data-model/

AngularJS and Restangular, trying to convert update method to API

I'm trying to convert my basic crud operations into an API that multiple components of my application can use.
I have successfully converted all methods, except the update one because it calls for each property on the object to be declared before the put request can be executed.
controller
$scope.update = function(testimonial, id) {
var data = {
name: testimonial.name,
message: testimonial.message
};
dataService.update(uri, data, $scope.id).then(function(response) {
console.log('Successfully updated!');
},
function(error) {
console.log('Error updating.');
});
}
dataService
dataService.update = function(uri, data, id) {
var rest = Restangular.one(uri, id);
angular.forEach(data, function(value, key) {
// needs to be in the format below
// rest.key = data.key
});
// needs to output something like this, depending on what the data is passed
// rest.name = data.name;
// rest.message = data.message;
return rest.put();
}
I tried to describe the problem in the codes comments, but to reiterate I cannot figure out how to generate something like rest.name = data.name; without specifying the name property because the update function shouldn't need to know the object properties.
Here is what the update method looked like before I started trying to make it usable by any of my components (this works)
Testimonial.update = function(testimonial, id) {
var rest = Restangular.one('testimonials', id);
rest.name = testimonial.name;
rest.message = testimonial.message;
return rest.put();
}
How can I recreate this without any specific properties parameters hard-coded in?
Also, my project has included lo-dash, if that helps, I don't know where to start with this problem. Thanks a ton for any advice!
Try like
angular.extend(rest,testimonial)
https://docs.angularjs.org/api/ng/function/angular.extend

save $location parameters state AngularJS

How do I save URL parameters state throughout lifecycle of application using pushState?
Page load.
Go to "/search" via href
submitSearch() through filter fields where $location.search(fields)
Go to "/anotherPage" via href
Go back to "/search" via href
Search paramters are set back to what they last were.
Is this a built in feature somewhere?
If not what's the best way to go about this?
If you're planning on a mostly single page website through pushState, you might want to get an intimate understanding of $routeProvider (http://docs.angularjs.org/api/ngRoute.%24routeProvider).
To go further down the rabbit hole, I would recommend looking at the ui-router module: (https://github.com/angular-ui/ui-router). $stateProvider (from ui-router) and $routeProvider work very similar, so sometimes the ui-router docs can give insights that you can't find in the poor documentation of the $routeProvider.
I reccomend going through the five page ui-router documentation (https://github.com/angular-ui/ui-router/wiki) page by page.
After all that preamble, here's the practical: you would set up a factory that holds history data and use the controller defined in your $routeProvider/$stateProvider to access and manipulate that data.
Note: the factory is a service. A service is not always a factory. The namespace goes:
angular.module.<servicetype[factory|provider|service]>.
This post explains the service types: https://stackoverflow.com/a/15666049/2297328. It's important to remember that they're all singletons.
Ex:
var myApp = angular.module("myApp",[]);
myApp.factory("Name", function(){
return factoryObject
});
The code would look something like:
// Warning: pseudo-code
// Defining states
$stateProvider
.state("root", {
url: "/",
// Any service can be injected into this controller.
// You can also define the controller separately and use
// "controller: "<NameOfController>" to reference it.
controller: function(History){
// History.header factory
History.pages.push(History.currentPage);
History.currentPage = "/";
}
})
.state("search", {
url: "/search",
controller: function(History, $routeParams) {
History.lastSearch = $routeParams
}
});
app.factory('<FactoryName>',function(){
var serviceObjectSingleton = {
pages: []
currentPage: ""
lastSearch: {}
}
return serviceObjectSingleton
})
If you're wondering what the difference between $routeProvider and $stateProvider is, it's just that $stateProvider has more features, mainly nested states and views... I think.
The easiest way is using cookies, angularjs provides a wrapping service for that.
Simply when you go to "/search" save your current URL parameters with "$cookieStore.put()" and once you've back you've got what you need with "$cookieStore.get()".
See the documentation at angularjs cookie store
I made a locationState service, you simply give it the values you want to persist and it stores them in the URL. So you can store all the state you want across all routes in your app.
Use it like this:
angular.module('yourapp')
.controller('YourCtrl', function ($scope, locationState) {
var size = locationState.get('size');
;
// ... init your scope here
if (size) {
$scope.size = size;
}
// ...and watch for changes
$scope.$watch('size', locationState.setter('size'));
}
Here's the code:
// Store state in the url search string, JSON encoded per var
// This usurps the search string so don't use it for anything else
// Simple get()/set() semantics
// Also provides a setter that you can feed to $watch
angular.module('yourapp')
.service('locationState', function ($location, $rootScope) {
var searchVars = $location.search()
, state = {}
, key
, value
, dateVal
;
// Parse search string
for (var k in searchVars) {
key = decodeURIComponent(k);
try {
value = JSON.parse(decodeURIComponent(searchVars[k]));
} catch (e) {
// ignore this key+value
continue;
}
// If it smells like a date, parse it
if (/[0-9T:.-]{23}Z/.test(value)) {
dateVal = new Date(value);
// Annoying way to test for valid date
if (!isNaN(dateVal.getTime())) {
value = dateVal;
}
}
state[key] = value;
}
$rootScope.$on('$routeChangeSuccess', function() {
$location.search(searchVars);
});
this.get = function (key) {
return state[key];
};
this.set = function (key, value) {
state[key] = value;
searchVars[encodeURIComponent(key)] = JSON.stringify(value);
// TODO verify that all the URI encoding etc works. Is there a mock $location?
$location.search(searchVars);
};
this.setter = function (key) {
var _this = this;
return function (value) {
_this.set(key, value);
};
};
});

Categories

Resources