My code is some thing
$scope.data = {};
var init = function () {
$http.post('views/Report.aspx/GetMailReport', {})
.success(function (data, status, headers, config) {
$scope.data = JSON.parse(data.d);
})
.error(function (data, status, headers, config) {
$scope.data = status;
})
};
init();
var data = $scope.data;
But the var data is returning empty {}
If you want a copy you should do as below... As the http call is asynchronous you assign inside the success callback method
$scope.data = {};
var data;
var init = function () {
$http.post('views/Report.aspx/GetMailReport', {}) .success(function (data, status, headers, config) {
$scope.data = JSON.parse(data.d);
data = $scope.data;
}) .error(function (data, status, headers, config) {
$scope.data = status;
}) };
init();
Edited:
Here is the link to a fiddle that I have created.
Related
How to apply Success And Failed in AngularCtrl
$scope.Btncall = function () {
var xx = MyService.GetDatafromApi();
xx.then(function (d) {
$scope.Employee = d.data;
}
),success(function (success) {
alert('ok');
})
What i understood is that you're asking how to handle a promise return success/fail like the one you get from the $http request service, so here's below an example:
$http.get('http://freegeoip.net/json')
.success(function (data, status, headers, config) {
//TODO When request Success
console.log(data);
$scope.Employee = data;
})
.error(function (data, status, headers, config) {
//TODO When request Failed
console.log(data); //Server Response values if there's any
$scope.Employee = [];
});
This is a sample code which helps you.
$scope.Btncall = function () {
MyService.GetDatafromApi().success(function (data, status,headers)
{
$scope.Employee = data;
})
.error(function (data, status, headers) {
$scope.Employee = [];
});
}
//Call Btncall Function..
$scope.Btncall();
Loading json using $http isn't working. Can't figure out where the problem is
.factory('streamStore', function ($http) {
var cachedData = null;
return {
findAll: function getAll() {
$http.get('img/sample.json').
success(function (data, status, headers, config) {
console.log("inside stream controller");
cachedData = data; return cachedData;
}).
error(function (data, status, headers, config) {
// log error
});
}
And in my controller this is how I'm calling it:
.controller('streamCtrl', function ($scope, ,streamStore) {
$scope.streams = streamStore.findAll();//not working ,
There is a error in your code . Check below
.factory('streamStore', function ($http) {
var cachedData = null;
return {
findAll: function() {
$http.get('img/sample.json').
success(function (data, status, headers, config) {
console.log("inside stream controller");
cachedData = data;
return cachedData;
}).
error(function (data, status, headers, config) {
// log error
});
}
and then call , as you were calling in your controller.
or use this
.factory('streamStore', function ($http) {
var cachedData = function(){
return $http.get('img/sample.json');
};
return {
findAll: function(){
return cachedData();
}
}
});
then in controller
streamStore.findAll().then(function(response){
console.log(response) // here is your data
})
since you have not returned anything from factory.
.factory('streamStore', function ($http) {
var cachedData = null;
return {
findAll: function getAll() {
$http.get('img/sample.json').
success(function (data, status, headers, config) {
console.log("inside stream controller");
cachedData = data; return cachedData;
// should return something
return cachedData
}).
error(function (data, status, headers, config) {
// log error
});
}
one more suggestion return promise to make it safe .
return $http.get('img/sample.json')...
and handle with then in controller.
.controller('streamCtrl', function ($scope, ,streamStore) {
streamStore.findAll().then(function(res){
//res will contain your data
$scope.streams = res.data;
});
Having issues bringing in multiple data from API endpoints.
Results come back undefined for values in $q.all method
$http.get('url').success(function(data, status, headers, config) {
$scope.data1= data;
})
$http.get('url').success(function(data, status, headers, config) {
$scope.data2= data;
})
$http.get('url').success(function(data, status, headers, config) {
$scope.data3= data;
})
$http.get('url').success(function(data, status, headers, config) {
$scope.data4= data;
})
$q.all([$scope.data1, $scope.data2, $scope.data3, $scope.data4]).then(function(values) {
$scope.data= values;
});
$q.all takes an array of promises so you'd have to do something like this.
$scope.promise1 = $http.get('url');
$scope.promise2 = $http.get('url');
$scope.promise3 = $http.get('url');
$scope.promise4 = $http.get('url');
$q.all([$scope.promise1, $scope.promise2, $scope.promise3, $scope.promise4]).then(function (values) {
$scope.data = values;
});
In my controller I have the following calls:
optionService.init($scope);
optionService.getSubjects1($scope);
optionService.getSubjects2($scope);
optionService.getAbc($scope);
Here's the code for the optionService:
angular.module('common')
.factory('optionService',
['$http',function ($http) {
var factory = {
init: function ($scope) {
$scope.option = {};
},
getSubjects1: function ($scope) {
var url = '/api/Subject1/GetSelect';
$scope.loading++;
$http.get(url)
.success(function (data, status, headers, config) {
$scope.option.subjects1 = data;
$scope.loading--;
})
.error(function (data, status, headers, config) {
$scope.loading--;
alert("Error: No data returned from " + url);
});
},
getSubjects2: function ($scope) {
var url = '/api/Subject2/GetSelect';
$scope.loading++;
$http.get(url)
.success(function (data, status, headers, config) {
$scope.option.subjects2 = data;
$scope.loading--;
})
.error(function (data, status, headers, config) {
$scope.loading--;
alert("Error: No data returned from " + url);
});
},
}
return factory;
}]);
Is there a way that I could make the call to optionService.getAbc depend on the completion of both the getSubjects1 and getSubjects2 calls? I will also soon be using Angular 1.2 if this makes any difference.
$q.all(promises) lets you combine multiple promises in to one:
optionService.getAbc = function($scope) {
$q.all([
optionService.getSubjects1($scope),
optionService.getSubjects2($scope)
])
.then(function() {
//...
});
}
Edit. Yes, you need to return promises from your getSubjects functions. To keep code changes to bare minimum, you could do something like this:
optionService.getSubjects1($scope) {
var url = '/api/Subject1/GetSelect';
$scope.loading++;
return $http.get(url)
.then(function (data, status, headers, config) {
$scope.option.subjects1 = data;
$scope.loading--;
}, function (data, status, headers, config) {
$scope.loading--;
alert("Error: No data returned from " + url);
});
}
With $http.then() you create a new promise that can be combined with other promises in getAbc()
You should rewrite your getSubject1 and getSubject2 to return promise. Also passing the $scope to the method and updating the scope from the service method is not a good way of doing things. You service methods should return data which assignable in your code. This makes your services more usable and readable.
If you change getSubject1 and getSubject2 in lines of
getSubjects1: function () {
var url = '/api/Subject1/GetSelect';
return $http.get(url);
}
In your controller you can do
$q.all([
optionService.getSubjects1(),
optionService.getSubjects2()
])
.then(function([data1, data2]) {
//use data1 to update scope for subject1
// use data2 to update scope for subject2
//call any service method.
});
I am having trouble returning data from a factory method to a controller.
service.js
var serverFac = angular.module('serverCom', []).factory('SmsSendService', function($http){
var transform = function(data){
return $.param(data);
}
var temp = {};
temp.sendSms = function(tempJs){
$http.post("http://localhost:8080/somepath/rest/text-messages/send/batch", tempJs ,{
transformRequest: transform
}).success(function(data, status, headers, config){
//do stuff with response
});
};
temp.login = function (tempUserPassword){
$http.post("http://localhost:8080/somepath/rest/users/authenticate", tempUserPassword ,{
transformRequest: transform
}).success(function(data, status, headers, config){
//do stuff with response
}). error(function(data, status, headers, config){
console.log(status);
});
};
temp.SimList = function (){
$http.get("http://localhost:8080/RetireesClub_server/rest/sim-cards"
).success(function(data, status, headers, config){
//do stuff with response
}). error(function(data, status, headers, config){
});
};
return temp;
});
serverFac.config(function($httpProvider){
delete $httpProvider.defaults.headers.common['X-Requested-With'];
$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form- urlencoded;charset=utf-8';
});
controller.js
function SimListController($scope, SmsSendService, SearchData, Search , $dialog , $location,$filter ){
smsSendService.simList().success(function(data){
$scope.sims= data;
}
}
Since you are handling the success callback in the controller, make your service function return a promise:
temp.SimList = function (){
return $http.get("http://localhost:8080/RetireesClub_server/rest/sim-cards")
};