How do I fetch json data in angularjs controller - angularjs

https://jsonplaceholder.typicode.com/posts I have to fetch data from this link and display it in my browser. In Javascript I used to do it using XMLHttpRequest and then parse it using JSON.parse(response). Is there a way I can achieve something similar in angularjs. Thank you

You can review this link angular http get
sample
$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.
});

Related

AngularJS access $http on onNotification event PushNotification cordova plugin

I'm using the plugin https://github.com/phonegap-build/PushPlugin/ with Angular 1.3 and I need to send the regid to server when receive "registered" event.
The problem is that I don't have $http object to call my server on this context. How can I achieve that, please?
function onNotification(e){
if(e.event == "registered"){
var req = {
method: "POST",
url: "http://myurl.com/?var="+e.regid
};
$http(req).success(function(data){
alert(data);
});
}
}
I just learned how to inject $http into the event method:
$http = angular.injector(["ng"]).get("$http");
Change $http call as follows, .success is deprecated.
$http({
method: "POST",
url: "http://myurl.com/?var="+e.regid
}).then(function successCallback(response) {
// this callback will be called asynchronously
// when the response is available
alert(response);
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
Ref. : https://docs.angularjs.org/api/ng/service/$http
Regards.

Creating custom header for $http in AngularJs

In my controller i want send a request using get method if $http, in that get method i want to send the sessionID in headers. Below am giving the code snippet please check.
this.surveyList = function () {
//return session;
return $http.get('http://op.1pt.mobi/V3.0/api/Survey/Surveys', {headers: { 'sessionID': $scope.sessionid}})
.then(function(response){
return response.data;
}, function(error){
return error;
});
}
but this is not working when i send this vale in backend they getting null.
So how to resolve this.
we have a issue where the api is getting called twice from angular , however it works only once when called with the POSTMAN. And here with the custom header passed to the api, the action is called twice. What could be the reason for it?
Try in this way,
$http({
method: 'GET',
url: 'http://op.1pt.mobi/V3.0/api/Survey/Surveys',
headers: {
'sessionId': $scope.sessionid
}
}).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.
});

I want to perform a rest api request on click of a button angular js

I want to perform a rest api on click of a button and show a loading bar until the request is completed and show the result of request in a mddialog . I am new to this I dont know how to proceed.
Any answers help would be appreciated.
$http({
method: 'GET',
url: url1
}).then(function successCallback(response) {
var confirm = $mdDialog.confirm()
.title('Download as CSV')
.textContent('You can download the csv by clicking below link')
.ariaLabel('Download')
.targetEvent(response.data.export_url)
.ok('Download as CSV');
$mdDialog.show(confirm);
// 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.
});
Your click action
<input type="button" ng-click="performCall()" />
Controller
$scope.performCall = function(){
// 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.
});
}
The loading bar
You just need to install this
Angular loader and it will do the rest for you

convert cURL to angularjs $http

I just started learning angularjs and i'm trying to get a token from an api. The curl command I have works fine when I use it in the terminal and can get the token just fine. I am having a hard time making it work using $http though.
Here's my cURL command:
curl --data "grant_type=authorization_code&client_id=CLIENT_ID&client_secret=SECRET_KEY&redirect_uri=http://localhost:9999&code=AUTH_CODE" https://www.twitchalerts.com/api/v1.0/token
Can anyone help me convert this using $http
Try this:
var data = {
grant_type :'authorization_code',
client_id :'CLIENT_ID',
client_secret :'SECRET_KEY',
redirect_uri :'http://localhost:9999&code=AUTH_CODE'
};
// Simple GET request example:
$http({
method: 'GET',//or POST
url: 'https://www.twitchalerts.com/api/v1.0/token',
data:data,
}).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.
});
if not then try to this
....
data:data,
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
....
For more information about angular $http https://docs.angularjs.org/api/ng/service/$http

What is type of data angular sending?

What is type of data angular sending? I use laravel + angular. I`m trying, but this script return 405 error. Method not allowed.
.controller('adminCtrl', function( $scope, $http ){
$scope.collection = [];
$scope.newData = [];
$scope.newrecord = function() {
$scope.collection.push($scope.newData);
$http({
url: '/newrecord',
method: "POST",
data: $.param($scope.collection),
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}
}).success(function(data){
console.log(data);
})
}
})
You are getting 405 - Method not Allowed because the server you are sending your request does not have POST it the white list of methods allowed to be used to perform requests to that given API.
It's not an angularJS issue, it's a server configuration issue.
$http sends data as json.
You do not need to serialize params using "$.param", data is plain javascript object, which is send to your REST endpoint.
So attach just "$scope.collection) and do not set Content Type manually, it is json by default.
POST can be send also with convenience method.
$http.post('/someUrl', data, config).then(successCallback, errorCallback);

Resources