I'm newbie at javascript, angularJS and JQuery, but I have just started programming a angularJS app where i use JQuery to get a JSON from a webserver like this:
var obj = $.getJSON( "http://something.com/lol?query="+ $scope.searchString, function() {
$scope.items = obj.responseJSON.entries;
}
Is there a method equal to $.getJSON in angularJS? So that I don't have to import the JQuery library.
Thanks in advance, newbie.
This is my solution so far:
function InstantSearchController($scope, $http){
$scope.search = function() {
$http.jsonp("http://something.com/lol?query="+ $scope.searchString + "?json_callback=JSON_CALLBACK").success(
function(data, status) {
console.log(data);
}
);
}
but I'm getting the error msg:
Uncaught SyntaxError: Unexpected token :
why is this? what am I doing wrong?
}
Because of the help i got from people answering my question I finally managed to fix it, and i did it like this:
app.controller('myController', function($scope, $http){
$scope.items = [];
$scope.search = function() {
$http({method: 'JSONP', url: "http://something.com/lol?callback=JSON_CALLBACK&query="+ $scope.searchString}).
success(function(data, status) {
$scope.items = data.entries;
}).
error(function(data, status) {
console.log(data || "Request failed");
});
};
Hope this helps anyone who has the same problem in the future :D
You could use $http to send AJAX requests in Angular.
You may use JSONP requests with $http.jsonp
https://docs.angularjs.org/api/ng/service/$http#jsonp
function ListProdcutsCtrl($scope, $http) {
var request = {'searchString' : 'apple'};
$http.get('/api/products', request).success(function(response) {
$scope.products_table_data = response.products;
});
There is an alternative in AngularJS called $http, you can find more here.
For instance :
$http({method: 'JSONP', url: 'http://domain.com/page?json_callback=JSON_CALLBACK'}).success(
function(data, status) {
// your stuff.
}
);
Or even shorter :
$http.jsonp('http://domain.com/page?json_callback=JSON_CALLBACK').success(
function(data, status) {
// your stuff.
}
);
JSONP (JSON Padding) allows you to get JSON data from another domain. However, the data you get should not be plain JSON, but rather a Javascript file like this :
JSON_CALLBACK([
{"name": "apple", "color": "red"},
{"name": "banana", "color": "yellow"}
]);
If your JSON data you need comes from the same domain, you do not need JSONP.
JSONP is used to overcome the cross-domain restriction of the AJAX URL calls.
With AngularJS (v1.5), you can use this code to send cross domain requests:
$http.jsonp(baseurl+'?token=assume_jwt_token'+encoding+type + "&callback=JSON_CALLBACK")
The Syntax for AngularJS JSONP request is :
$http.jsonp(url, [config]);
where url is "string" type representing Relative or absolute URL specifying the destination of the request. The name of the callback should be the string JSON_CALLBACK, and [config] is Optional configuration object.
Related
If the URL that is to be hit has to be passed variables i.e.
API.openweathermap.org/data/2.5/forecast/city?name=[random_city_name]&APPID=[key_value],
then what is better to use ajax or angular js.
If I am using ajax then how am I supposed to pass the variable? I am a newbie in this. So, need your help.
Your url seems to have request parameters and assuming you are using angular1
For this, you can use
$http({
method: 'GET',
url: url,
headers: {},
params : {}
})
Put your parameters as a map and $http will take care of creating an url.
Refer $http documentation here
what is better to use ajax or angular js
You can't compare as AJAX provides a way to communicate (send requests and get responses) with the server asynchronously and AngularJS used AJAX to extends the 2-way data binding.
To accomplish the above situation we can use Angular $http service.
var baseUrl = API.openweathermap.org/data/2.5/forecast/city;
var method = 'GET';
var data = {};
var params = {
"name":cityName,
"APPID":key_value
};
$http({
method: method,
url: baseUrl,
params : params,
data : data
}).then(function mySucces(response) {
$scope.data = response.data;
}, function myError(response) {
$scope.data = response.statusText;
});
You can use angular $http service and pass your params like below.
var UserInfo = function() {
$scope.userID = "1111";
var req ={
"method":"GET",
"url": someURL + $scope.userID,
"withCredentials":true
};
$http(req).then(function(response) {
alert('success');
}, function(response) {
alert('error');
});
};
I am trying to submit a form data to an API endpoint which I created. I have tested it in PostMan and the API functions well and I can get the data in successfully. But while connecting that API endpoint to a function in angular js I get the following error.
Heres my code:
$scope.saveSession = function() {
$http.post("/session/survey", $scope.session).success(function(data, status) {
$window.location.href = '/';
console.log("Sucessfully getting data" + JSON.stringify(data));
})
}
Note:
$scope.session is an object that being populated by using the ng-model tag.
For example:
<input type="text" ng-model="session.title">
Edit (Controller Code):
// This is our controller for the bio page
var session = angular.module('session', ['sessionService'])
session.controller('sessionCtrl', function($scope, $http, $window, sessionServices) {
$scope.session = {};
$scope.saveSession = function() {
$scope.session.sessionNo = 1;
$scope.session.coach = "mmmm";
$scope.session.modules = "wokr place";
//console.log(user);
$http.post("/session/survey", $scope.session).success(function(data, status) {
$window.location.href = '/';
console.log("Sucessfully getting added bio" + JSON.stringify(data));
})
};
});
That's because .success() really isn't a function. As the documentation explains, a promise is returned by $http.post() which you can chain with .then()
$http.post('/someUrl', data, config).then(successCallback, errorCallback);
Use promises, "success" function doesn't exists in $http object($http success and error methods are available only in older versions of Angular 1.x, but they've removed in Angular 1.6):
// Simple GET request example:
$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.
});
More in official documentation https://docs.angularjs.org/api/ng/service/$http
It's because you're using $http.post().success.
Try;
$scope.saveSession = function() {
$http.post("/session/survey", $scope.session).then(function(data, status) {
$window.location.href = '/';
console.log("Sucessfully getting data" + JSON.stringify(data));
})
}
We use .then to return a "promise" from the $http service.
Hope it helps!
I just dealt with a similar issue with versions 1.7.2 and 1.7.4. It's not exactly the same issue because I was never using .success but I'm posting here because this post comes up first when searching.
When using the shortcut version $http.post(/api/endpoint/', data) I would get:
"TypeError: $http.post is not a function"
And if I used it with the callbacks exactly as it appears in the documentation:
$http({method: 'POST', url: '/api/endpoint/', data: $scope.newObject}).then(function (response) {
$scope.status = response.status;
$scope.data = response.data;
}, function (response) {
$scope.data = response.data || 'Request failed';
$scope.status = response.status;
});
I was getting
"TypeError: $http(...).then is not a function"
In this case the problem was that I had both $resource and $http in the same controller. Not sure if this is the intended behavior but removing $resource suddenly made $http work again.
Hopefully this helps someone else
It's been 3months since I've used angular and I'm loving it. Finished an app using it and now I'm on a code refactoring or improving my code for better practice. I have an Api service.js that used $http and I want to migrate it to using $resource :)
I have here a sample of my api code using $http:
Service.js
authenticatePlayer: function(postData) {
return $http({
method : 'POST',
url : api + 'auth/player',
data : postData,
headers : {'Content-Type' : 'application/json'}
});
},
#Controller.js
Api.authenticatePlayer(postData).then(function (result){
//success
}, function(result) {
//error also this will catch error 400, 401, and 500
});
The above code are working and now here is my first attempt on using $resource:
authenticate: function() {
return $resource(api + "auth/:usertype",
{
typeOfUser : "#usertype" //types can be player, anonymous, admin
},
{
post : { method : "POST" }
}
);
}
#Controller
var postData = {
email : scope.main.email,
password : scope.main.password
};
var loginUser = new Api(postData);
loginUser.$post(); //error T__T
That just how far I get, don't know how to pass a data to my api using $resource from my controller. That just one part of my api call, there's still a bunch of it but for now this will do. :D.
Any help is greatly appreciated.
Thanks
You could try this:
API
authenticate: function(){
return $resource(api+"auth/:usertype",{},post:{method:"POST"});
}
Note: :usertype in URL means that the value of usertype property which you passed into postData will replace the part of URL
Controller
var postData = {email:scope.main.email,password:scope.main.password};
API.authenticate().post({usertype:'player'},postData,function(response){
console.log(response);
});
Or you could fetch response like this:
var response = API.authenticate().post({usertype:'player'},postData);
Hope this is helpful.
How can I update the common HTTP headers at runtime from an AngularJS controller, e.g. $httpProvider.defaults.headers.common['Authorization']? It seems $httpProvider can only be accessed from a config module, but I need to update common HTTP headers for all future requests from a controller, or a service called by the controller.
I can update the locally scoped headers for the next request by injecting $http into my controller, but I need to do update HTTP headers for all future requests, specifically for basic authentication.
Not sure exactly when it appeared in Angular, but a good 20 months later, you have the option to define default headers at runtime, directly on the $http object.
From $http documentation: Setting HTTP Headers
$http.defaults.headers.common.Authorization = 'Basic dXNlcjpwYXNzd29yZA=='
I used this strategy once when I had to work with an API. I created an XYZApiService to wrap all the requests to that API.
Here's a simple example:
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope, HttpWrapper) {
$scope.movies = [];
HttpWrapper.setAuthorization('Basic dXNlcjpwYXNzd29yZA==');
HttpWrapper.http({
method: 'get',
url: 'movies.json'
}, function(data, status){
$scope.movies = data;
}, function(data, status){
console.log('error', data, status);
})
});
app.run();
app.factory('HttpWrapper', function($http) {
var authorization = null;
return {
setAuthorization: function(auth){
authorization = auth;
},
http: function(options, successCallback, errorCallback){
if(authorization){
options.headers = options.headers || {};
options.headers.authorization = authorization;
}
console.log(options);
$http(options).success(successCallback).error(errorCallback);
}
}
});
You can try it in Plunker here:
http://plnkr.co/edit/hr2Rvojic0asvWxSoalo?p=preview
I'm trying to overwrite the query()-method of AngularJS $resource with a custom $http-GET. However, it doesn't seem to overwrite the result of the operation. It returns an object with method, data and headers, not data.rows[].
angular.module('couchdb', ['ngResource']).
factory('Project', function($resource, $http) {
var Project = $resource('http://couchdb/mydb', {}, {
'update': { method: 'PUT' },
'query': {method:'GET', isArray: false}
}
);
Project.query = function() {
return $http({method: 'GET', url: 'http://couchdb/mydb/_design/projects/_view/index'}).
success(function(data, status, headers, config) {
return data.rows;
}).
error(function(data, status, headers, config) {
$scope.data = data || "Request failed";
$scope.status = status;
});
};
return Project;
});
How can I only get the rows of the result for the resource?
ngResources don't need to rely on the $http service. You don't need to be redefining the Project.query function - as you've already indicated it as an action of the Project $resource (in addition to it being included by default).
This means that the Project.query function is ready to go, and does not need re-definition. You can literally just do Project.query() to get results. It supports callbacks for success/failure, so Project.query({}, successCallback, failureCallback) will submit no arguments, and give you access to the returned data.
I suggest you read the AngularJS $resource documentation carefully, as they provide plenty of good examples. A basic example is also included in Step 11 of the Angular Tutorial.