AngularJS $http.Post -> open the urllink + $http.get getting it - angularjs

im still new with Angular and am trying to grasp the concept.
Currently I cant post code, but this is hopefully not a problem.
I have used https://docs.angularjs.org/api/ng/service/$http ... especially $http.post in order to Post some data I clicked in the current window
The following Code didnt work due to the error "$http function is not defined", even though $http was already declared... in the correct order I might add (I found other ppl who had issues with that due to the fact that they switched the parameters $scope, $http)
Thats my first Question is there a simple reason? I can add code tomorrow if necessary.
$http({
method: 'GET',
url: '/someUrl'
}).then(function successCallback(response) {
// this callback will be called asynchronously
// when the response is available
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
Second Question: Well, but $http.post(..) with parameter url to the second site worked fine.. and in order to use the data i most likely need to use $http.get() at the second site... which I understand.
But how do I need to configure the $http.post that I actually open the url in my browser?
Well I hope you can help me ... sry that I currently can't give you my codeexamples, but I hope it's enough :)

Related

AngularJS and Ionic click to repeat a failed http request

I'm making an app using AngularJS and Ionic.
When my app sends a request to the server using $http and fails, I want a view to load to show the user a button which, when clicked, repeats the $http request that was just attempted.
Currently if the request fails, it will load an error view, but I want that error view to have a button which performs a repeated task when clicked. This will be the same error controller for all server errors, so needs to be adaptable and have a way to pass in or repeat all functions easily in one place.
function getData(){
$http({
url: remoteUrl+'/dat/get_data_app',
method: 'POST',
data: {}
}).then(function(response) {
}, function(response) {
//the getData is trying to pass in the current function so it can be repeated in the error controller
$localstorage.setObject('httpObj', getData());
$state.go('app.error');
});
}
Below is the error controller currently:
.controller('ErrorCtrl', function($scope, $localstorage, $recipes) {
var httpObj = $localstorage.getObject('httpObj');
//this needs to run as a funtion (only when button is clicked but I can sort that out, just need a way of passing the function here)
httpObj;
})
The error controller runs when the user lands on the error page. In order to make the controller short and not need much changing later, I want the function passed here to run on click of a button which I'll place here.
Adding the button isn't the problem, but I just want to know if there's an easy way to pass the function.
This whole way of doing it may be wrong but any thoughts will be appreciated :)
Thanks

Synchronous in angular controller

In the following code, the controller is not invoking the third $http.get() call and instead goes directly goes to the end.
I want to execute all $http.get() requests. In my code, the third $http.get() depends on the second $http.get() result. Additionally, the second $http.get() depends on the first $http.get() result.
Code
Does anyone have an idea why the third $http.get() is not being invoked?
with the way you structured your code, this code below will run before the third $http.get
orderDetails['orderData'] = data;
orderDetails['kitNames'] = kitNames;
orderDetails['proteins'] = proteins;
orderDetails['dietaries'] = dietaries;
orderDetails['ingredients'] = ingredients;
you would have to put it in the third $http.get and every other code that depends on it, and that should solve your challenge
Also, your code can be refactored, so it is more readable and understandable for you to read
Suggestion:-
Actually this is a big issue with angular http call, Because http call does not support async :false
See my answer in this discussion : Angularjs $http VS jquery $.ajax
Your code look like a lot of confusions for call new http method inside of inside methods.
And your code looks like not standard format also gives lot of confusion.
So if you change any code in this file after some day's, then you need to put a microscope glass in your eye, and will see one by one lines. it's will take more times. So avoid http call only for this type of situation.
Solution:-
Avoid http call means, pleas do with Ajax call with async:false option
The code look like
$.ajax({
type: "GET",
dataType: "Json",
url: 'Your URL',
**async: false,**
success: function (returndata, status, jqxhr) {
$(this).html(returndata).hide().fadeIn();
}).fail(function() {
alert("error");
})
});
Explanation About Async:false
Setting async to false means that the statement you are calling has to complete before the next statement in your function can be called. If you set async: true then that statement will begin it's execution and the next statement will be called regardless of whether the async statement has completed yet.

URLs in angular

I have a controller that has an http.get function in it that looks like this:
$http.get('api/population_data', {cache: true}).success(function(data) {
$rootScope.population_data = data;
});
I am currently in the middle of refactoring my code to put http requests in a service, then call the appropriate function from the service in the controller (makes the app more testable, and follows better design practices):
DashboardHTTPService.get_population_data().then(
function(response) {
$rootScope.population_data = response;
});
My issue is that when I make the .get_population_data call, the service no longer resolves the full url in the http.get request: What I'm trying to say is, when I had the http.get request in my dashboard controller, I could make the request from there and it would know to navigate to my api url '/dashboard/4/api/population_data', but when I make the http.get() from the function in the service it just looks for /api/population_data (does not prepend the /dashboard/4 like before).
I think there is something about url resolution in the context of the controller that I am missing...can someone explain why this is? I'm thinking I can have the controller pass in the location.pathname to the service, but I don't think that is the best solution...
Thanks, sorry for being a bit confused, but I didn't think that any of the other questions I looked at answered my question appropirately..

AngularJS $http success but not working

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.

Origin https://site.com is not allowed by Access-Control-Allow-Origin. using JSON

This is the first time that I encountered such problem, I have this code which came from the answers from this site and trying to experiment what the output is gonna be.
$.getJSON('https://api.twitter.com/1.1/friendships/lookup.json?screen_name=episod,twitterapi', function(data) {
console.log(data);
});
So when I run it, it shows like this, the "Access-Control-Allow-Origin". How can I fix this problem? Like allowing to get data from other location.
Any solution for this stuff? I'm using drupal 7, I might as well say it because it might be relevant to my problem though.
I saw this questions but, never helped and some of it seems vauge.
XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin
How to get the json data from this link
https://drupal.org/node/1937756
https://drupal.org/project/services_accept_origin
Any help would be appreciated. :)
The Twitter API does not support CORS requests, you have to use JSONP instead. You can trigger a JSONP request by adding the callback query parameter. Here is an example:
$.ajax({
url: "https://api.twitter.com/1.1/friendships/lookup.json?screen_name=episod,twitterapi",
dataType: 'jsonp',
success: function(data){
console.log(data);
}
});
Twitter's documentation for the callback parameter can be found here: https://dev.twitter.com/docs/things-every-developer-should-know

Resources