In Angular I've made a service to retrieve data with a $http.get call from a json file (in my code: file4.json).
In the success call the data is passed into the array 'bmlService.items'. The console.log shows things went well.
However, this array is empty outside the $http.get function.
How can I pass the data outside this function?
This is my code:
app.service('bmlService', function($http){
var bmlService = {};
bmlService.items = [];
$http.get("file4.json")
.success(function(data){
bmlService.items = data;
console.log("inside succes call: ", bmlService.items);
})
.error(function(data, status){
alert("Something went wrong...");
});
console.log("outside http.get: ", bmlService.items);
return bmlService;
});
However, this array is empty outside the $http.get function. How can I pass the data outside this function?
You cannot because the AJAX call is asynchronous and this data is available only after the callback has executed - which can happen at a much later stage after firing the AJAX call. So if you want to pass it to the outside you could invoke some other function and pass the data as parameter to this function:
.success(function(data) {
bmlService.passData(data);
})
So basically you will have to redesign your code to work with callbacks instead of some sequential calls and variables that get assigned one after the other:
var bmlService = {
passData: function(data) {
// do something with the data here
}
};
Related
I am newbie on angularjs, i have some problems about promise using with ng filling.
I want to access filled html data with javascript. But the data on the page can be change dynamically.
When click some button. It should be fill angular with changable data. Then will take the recent filled html source.
array.forEach( function (id) {
var promise = $http.post('http://postpagedomain.aspx?id=' + id).then(onComplete, onError);
promise.then(function () {
var html = $('#divframe').html();
}
);
});
var onComplete = function (response) {
$scope.Info = response.data;
}
Bu it's not taking recent data cause of synchronous problem. How can i handle it?
Instead of taking response of your http call in a variable, directly make http call. Something like:
$http.post('http://postpagedomain.aspx?id=' + id).then(onComplete, onError);
So, this will call the onComplete method when API returns success and write all your logic of actions to be performed once API call gets success in the function body of onComplete.
Also include a function of onError in your code to get any exceptions thrown by the API.
Your code can look something like:
array.forEach( function (id) {
$http.post('http://postpagedomain.aspx?id=' + id).then(onComplete, onError);
});
function onComplete(response) {
$scope.Info = response.data;}
Am getting an error Error: [$injector:undef] when am using service and http. I couldn't find why is it coming after changing all the changes that has been suggested for this particular error. Kindly check the below code
mainApp.controller('deviceDataController',["$scope","mainService", function ($scope,mainService) {
console.log(mainService);
mainService.deviceDataVar().success(function (data) {
// $scope.deviceDetails = mainService.devices;
console.log(data);
});
}]);
mainApp.factory("mainService",["$http", function ($http) {
angular.forEach(deviceIds, function(value, key) {
var timezone = user_response.timezone;
var DataUrl = LAX_API + "device_info.php?deviceid=" + value + "&limit=288&timezone=" + timezone;
return {
deviceDataVar: function () {
return $http.get(DataUrl).success(function (response) {
devices = response.data;
return devices;
}).error(function (data, status, headers, config) {
// log error
console.log(data)
});;
}
}
});
}]);
kindly help me out with my issue
Thanks!!
Your factory declaration is not valid.
Your factory should return only single method
Create a method that returns $http promises
Agregate all promises inside $q, that will wait for all of them to return a response
Agregate all responses
Return them inside a promise- you cannot return a value, because AJAX calls are async.
Your factory should look like this:
mainApp.factory("mainService", function ($http, $q) {
/* generate single link for deviceID */
function getDevice(value){
var timezone = user_response.timezone;
var dataUrl= LAX_API + "device_info.php?deviceid=" + value + "&limit=288&timezone=" + timezone;
return $http.get(dataUrl);
}
function deviceDataVar(){
// map method will transform list of deviceIds into a list of $http promises
var allRequests = deviceIds.map(getDevice);
// this promise will wait for all calls to end, then return a list of their results
$q.all(allRequests).then(function(arrayOfResults) {
// here you will have all responses, you just need to agregate them into single collection.
// secondly you will need to wrap them into a promise and return
return ...
});
}
/* Return only public methods, at the end */
return {
deviceDataVar: deviceDataVar
}
});
(I was writing this on fly, so there could be few mistakes :), but the conception is right though )
Useful links:
Aggregating promises: angular -- accessing data of multiple http calls - how to resolve the promises
Array.prototype.map: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
How to apss a promise to a factory: How can I pass back a promise from a service in AngularJS?
UPDATE:
To make it work by invokiing small steps you should :
Mock the factory method, let it return a hardcoded value. Return it through a promise.
replace hardcoded value with single (hardcoded) URL to a selected device.
use aggregation ($q.all) for this single $http call.
replace single $http with array made from deviceIds list.
I seem to be having an issue sending json from my factory out to controllers
Here is my factory
.factory("UserService", function($http) {
var LevelsHere;
$http.get("/assets/images/generated.json").success(function(data){
LevelsHere = data;
return LevelsHere;
});
return {
all: function() {
return LevelsHere;
},
first: function() {
return LevelsHere[0];
}
};
})
I am simply trying to send the json object out (or bits of it) with this factory. I can console.log inside the http get and it seems to be grabbing the json just fine. I seem to have hit a wall, any help would be much appreciated. I would just like the all ad first functions to be working. thanks!
I first had success by hard coding the levelsHere above it with the json string like var levelsHere = [{"stuff in here"}], but when i moved it over to an $http it doesn't work.
Since you don't have any $watch to look over the value returned from asynchronous $http.get request, the updated value is not available to the consumer. As $http.get request returns a promise, you can leverage the promise and update the value on success of the promise in then() as below:
var app = angular.module('app', [])
.factory("UserService", function($http) {
var LevelsHere = $http.get("https://api.github.com/users/mralexgray/repos")
.success(function(data){
return data;
});
return {
all: function() {
return LevelsHere;
}
};
})
.controller('controller', function(UserService, $scope){
UserService.all().then(function(data){
$scope.value = data;
});
})
DEMO
What is not working exactly? My guess is that you got undefined immediately after this factory method, since $http uses deferred object
You are returning LevelsHere before the async call is finished. The order of your operation goes:
call http.get
return all and first which return LevelsHere (even though the http request has not finished)
http get returns json
success call back fires returning LevelsHere to nobody.
A better way is to just return the promise:
return $http.get("/assets/images/generated.json")
then in your controller you can get the value from the promise by calling the success function. If you try to resolve the promise in the factory and return the value, your controller will try to use the value before it's returned from the server.
var promise = UserService()
promise.success(function(data){
// do something with data
}
I think you find this question thousands of times...but I can't really understand the way to solve.
I have a $http request inside a Service...
app.service('getData', function ($http) {
this.getDataList = function () {
$http.get('../content/catalog/data.json')
.success(function(response) {
return response;
})
};
I call it from the app.run
app.run(function (getData) {
list=getData.getDataList()
})
If I log the list variable is undefined
What is the way to sync them?
Thank you for the help!!!!
You're treating the call as if it were synchronous, where as its an Async call, so when you say return response; that line executes when the call hasn't finished yet and naturally you get undefined, use a callback instead or return a promise:
this.getDataList = function (callback) {
$http.get('../content/catalog/data.json')
.success(function(response) {
callback(response);
})
};
Usage:
getData.getDataList(function(data){
var list=data;
console.log(data);
});
EDIT:
Regarding promises, the idea is very simple, whenever you have an async operation that you expect will not be completed immediately, i.e. ajax calls, you can use a promise returned by the method making that async operation in order to find out when the task has finished.
For example $http returns a promise by default, so you can change your code to make use of that promise by simply returning the $http call itself:
this.getDataList = function () {
return $http.get('../content/catalog/data.json');
}
and then use it like this:
getDataList().then(function(successData){
var list=successData;
},function(errorResponse){
alert("something terrible has happened!");
})
The promise returned by $http takes 2 callbacks, the first for a successful call and the second is for errors.
Nowadays I mostly just pass callbacks in to the function making the async call, saves me from having to write then().
list is undefined because you forgot to return $http.get in this.getDataList()
By the way, $http will return a promise (an object with then and finally methods), which you can directly use in ng-bind for instance.
Use promises instead.
JavaScript uses promises for async(deferred) operations. These promises are based on callbacks(I promise to run your callback when I'm done).
getDataList does a http.get behind the scenes and doesn't block the code. It simply returns a promise object.
You can add callbacks to the promise object that will happen when the async operation finishes.
app.service('getData', function ($http) {
this.getDataList = function () {
return $http.get('../content/catalog/data.json');
};
});
app.run(function (getData) {
getData.getDataList().then(function(res){
list = res
});
});
$scope.iter = 0;
$scope.myArray.forEach(function () {
$http.get($scope.myArray[$scope.iter].URL)
.success(function (data) {
$scope.myArray2.push(data);
//$scope.myArray2[$scope.iter]=data
});
$scope.iter++;
})
The above code works but I want the results in myArray2 in the same order as it was called. I know that I cannot expect $scope.myArray2[$scope.iter]=data to work but that is what I need.
I looked at the angular documentation on promises but could not make out how to use it for the above.
You can put all promises from the get requests in an array and use $q.all() to create a promise that resolves when all underlying promises resolve. You can then iterate the responses in the order they were added to the requests array, and push each response's data into the array in order...
function controller ($scope, $q) {
// ...
var requests = [];
var $scope.myArray2 = [];
angular.forEach($scope.myArray, function (value) {
requests.push($http.get(value.URL));
});
$q.all(requests).then(function(results) {
angular.forEach(results, function(result) {
$scope.myArray2.push(result.data);
});
});
}
Dont understand what you are trying to achieve, but here is an example of simple deferred promises in a controller:
var firstDefer= $q.defer();
firstDefer.promise.then(function(thing){
// here you make the first request,
// only when the first request is completed
//the variable that you return will be filled and
//returned. The thing that you return in the first .then
// is the parameter that you receive in the second .then
return thingPlusRequestData;
}).then(function(thingPlusRequestData){
//second request
return thingPlusPlusRequestData;
}).then(function(thingPlusPlusRequestData){
//and so on...
});
firstDefer.resolve(thing);
//when you call .resolve it tries to "accomplish" the first promise
//you can pass something if you want as a parameter and it will be
// the first .then parameter.
Hope this helps u :D
You will normally NOT get the results in the order you called the $http.get(...) function. Mind that the success(...) function is called asynchronously, whenever the http response comes in, and the order of those responses is totaly unpredictable.
However you can work around this by waiting for all the responses to finish, and then sort them according to your criteria.
Here is the working fiddle: http://fiddle.jshell.net/3C8R3/3/