I am using AngularJs in my project. I have to make multiple http calls and then return the consolidated result to my view. How to achieve this using AngularJs?
Please let me know since I am not an expert in AngularJs and need a proper approach to solve this.
Use the promise API:
var wheatherPromise = $http.get(...);
var timePromise = $http.get(...);
var combinedPromise = $q.all({
wheather: wheatherPromise,
time: timePromise
})
combinedPromise.then(function(responses) {
console.log('the wheather is ', responses.wheather.data);
console.log('the time is ', responses.time.data);
});
See the documentation for more details
make ur $http request in a seperated function or (AJS service is
recommended).
call that function in a for loop based on ur list
declare a scope variable holds an empty array inside the function
push response objects in the array
avoid defining $http.get inside a for loop which cause unexpected behavior
Related
I need to post same url with multiple parameters simultaneously .
how to achieve in angular 1
You do it with $http service with $http.post() request. If you want to do multiple requests, you can do it a loop. E.g. return $http.post(url,data).then((response)=>{return response.data;})
This is where you need to clarify what do you mean by saying "simultaneously", because if you want to receive the response from all of these requests at the same time, then you need something more advanced like deferred objects. This is what $q service is for, it helps you to resolve such Promises.
Firstly you need to collect all of the asynchronous callbacks in an array:
var promises = [];
angular.forEach(array, function(element) {
promises.push( $http.post(url,element).then((res)=>{return res.data}) );
}
(Pass different parameters/data however you like)
Then you need to resolve all of them at the same time with $q.all():
$q.all(promises).then((res)=>{
/* do what you need with them, e.g:
$q.defer().resolve(res)
*/
})
It should resolve an array with your data from previous requests in synch now.
I am trying to fetch data from mongodb using express to angular inside a for loop.
I can access data inside this get instance but not outside of it. Here is my code
var daily_jobs=[];
$http.get(mongodUrl).then(function(response) {
var allMachinename = response.data;
daily_jobs=[];
for(var i = 0;i<allMachinename.length;i++){
$scope.masch_name.push({name:allMachinename[i].name,id:allMachinename[i].id,daily_jobs:[]});
$http.get(mongodUrl+'getmaschdata/'+$scope.input_id+'/'+allMachinename[i].id).then(function(jobs) {
if(jobs.data.length > 0){
daily_jobs= jobs.data;
}
console.log(daily_jobs[0].job_name);
},function(err){
console.log(err);
});
$scope.masch_name[i].daily_jobs= daily_jobs;
}
},function(err){
//console.log(err);
});
The variable daily_jobs is global, but when I want to access it outside the get function it always remain empty. How can I get that value outside of second http.get function? Any help will be appreciated. Thanks.
I couldn't get a clear picture what are you trying to achieve why are you making two http get inside a controller rather than making as a service. however to answer your question replace this
daily_jobs= jobs.data;
with
$scope.masch_name[i].daily_jobs = jobs.data;
that should work if you want to know more about this read here
Angular Share Variable betwen $http.get and controller
I will suggest you to read about services in AngularJS and $scope.apply as well for more detail
I am trying to use the ebay api in an angular.js app.
The way the api works by itself is to pass data to a callback function and within that function create a template for display.
The problem that I am having is in adding the data returned from the callback to the $scope. I was not able to post a working example as I didnt want to expose my api key, I am hoping that the code posted in the fiddle will be enough to identify the issue.
eBayApp.controller('FindItemCtrl', function ($scope) {
globalFunc = function(root){
$scope.items = root.findItemsByKeywordsResponse[0].searchResult[0].item || [];
console.log($scope.items); //this shows the data
}
console.log($scope.items); //this is undefined
})
http://jsfiddle.net/L7fnozuo/
The reason the second instance of $scope.items is undefined, is because it is run before the callback function happens.
The chances are that $scope.items isn't updating in the view either, because Angular doesn't know that it needs to trigger a scope digest.
When you use the Angular provided async APIs ($http, $timeout etc) they have all been written in such a way that they will let Angular know when it needs to update it's views.
In this case, you have a couple of options:
Use the inbuilt $http.jsonp method.
Trigger the digest manually.
Option number 1 is the more sensible approach, but is not always possible if the request is made from someone else's library.
Here's an update to the fiddle which uses $http.jsonp. It should work (but at the moment it's resulting in an error message about your API key).
The key change here is that the request is being made from within Angular using an Angular API rather than from a script tag which Angular knows nothing about.
$http.jsonp(URL)
.success($scope.success)
.error($scope.error);
Option 2 requires you to add the following line to your JSONP callback function:
globalFunc = function(root){
$scope.items = root.findItemsByKeywordsResponse[0].searchResult[0].item || [];
console.log($scope.items); //this shows the data
$scope.$apply(); // <--
}
This method tells Angular that it needs to update it's views because data might have changed. There's a decent Sitepoint article on understanding this mechanism, if you are interested.
I have a custom Web API written in .NET that returns user's information that will be used in my AngularJS application. I want to be able to call my API once, and then use that returned JSON across my entire AngularJS application without having to recall the API within each of my controllers.
I currently have a factory of services, one of which returns all of the client's details I need to use the in rest of the services.
.factory('customApiService', function ($resource) {
return {
userInfo: function(userId, callback){
var api = $resource('../../api/UserInfo/:userId', {
userId: userId
}, {
fetch: 'JSONP',
'query': { isArray: false }
});
api.fetch(function (response) {
callback(response);
});
}
}
)
Now I don't want to call this userInfo service in every controller, but I do want the data to be passed into each without calling my API multiple times.
customApiService.userInfo(userId, function (d) {
var gaProfileId = d.gaProfileId;
var yelpId = d.yelpId;
var tripAdvisorId = d.tripAdvisorId;
var facebookPageName = d.facebookPage;
var twitterHandle = d.twitterHandle;
var clientName = d.clientName;
var searchlightAccountId = d.searchlightAccountId;
var searchlightDomain = d.searchlightDomainId;
}
You can try global variables .
use a $rootScope https://docs.angularjs.org/guide/scope
$rootScope is available in all controllers an templates .Just inject $rootscope in your controller or wherever required.
From what I read of your description and responses to other questions, it sounds like you're trying to make an asynchronous call before the rest of your app starts up. This is possible, but complex, and sort of voids the point of Angular in the first place. As I see it, you have two options:
QUICK HACK: If you really want this kind of behavior, why start your app at all? Do your request first, before you define your app in the first place, then define your app in the result handler for the request.
RIGHT WAY: Alter the behavior of your services and controllers to tolerate not having enough information to fully start. A lot of times this is less difficult than it sounds. Usually you can just chain a promise into their initialization block of code to wait for the data you need. Take a look at Brian Ford's "Angular Modal" project, at the lines of code I've highlighted here:
https://github.com/btford/angular-modal/blob/master/modal.js#L25-L36
This technique sets up a promise to return from the function. If the data it needs is already loaded from the service, it resolves the promise immediately. Otherwise, it makes the call to get what it's after, and you can see later (line 39) that the module uses promise.then() to wait until it has the data it needs to run.
This is a great pattern for both controllers and services when working with asynchronous data.
If using a $resource call instead, note that most $resource calls return a promise in a property called $promise. You can do something like this:
var MyController = function($scope) {
// This will get set soon!
$scope.myData = null;
var myResource = $resource('/path/to/:someId', { someId: '#id' });
myResource.get({ someId: 1 }).$promise.then(function(data) {
$scope.myData = data;
});
};
You can do more things in the .then() resolution callback for the promise, like initialize more parts of your controller, etc. There are also ways you can delay starting your entire controller until the resource is available. One really cool way is if you happen to be using the Angular ui-router module, there is a "resolve" option when defining each route. You can use that to call the $resource as shown above, and ui-router will wait to start your controller/view until it has what it needs.
i'm using angularJS and SLIM PHP restful server, the PHP service is working and actually i have already used $http.get() with no problems in this application ...
But now a strange thing is happening, i created a new function in the same way that the others, and it get .success(function(data)) with no problems, i actually can console.log(data) and it shows the right results, but when .success() finish and return, i recieve a undefined result.
ps: there is no error in browser console.
var markerOptions = [];
loadMarkers();
console.log(markerOptions);
function loadMarkers() {
$http.get('http://localhost/rest/getMarkers').success(function(response){
console.log(response);
markerOptions = response;
});
}
Console.log() inside success() return the right data
Console.log() after loadMarkers() return undefined
#MarcKline's comments are correct. Anyways, following what I think you're trying to achive by this piece of code of yours, you can assign the returned data from the ajax response to a scope variable (assuming you're using $scope), e.g $scope.markerOptions = response. You can declare markOptions as a scope variable by var $scope.markOptions = [] (...and, of course, log it by console.log($scope.markOptions) accordingly). Also, define $scope.loadMarkers = function() {...} and call it by $scope.loadMarkers()
The scope will be updated as soon as the client-side gets its ajax response.
Hope it helps your current needs in addition to a better understanding of javasciprt's async approach that some of its principles were explained to you by the comments.