Get data from ajax request to Angular - javascript

I have 2 requests
$.ajax({
type: "POST",
url: "http://sandbox.gasvisor.com:9988/uaa/oauth/token",
data: "grant_type=client_credentials",
headers: { 'Content-Type': 'application/x-www-form-urlencoded',
'Authorization':'Basic SVRXRV9XRUJfQVBQOml0d2VfY2xpZW50' },
success:function(data){
console.log(data);
getData(data.access_token);
}
})
function getData(acess_token){
$.ajax({
type: "GET",
url: "http://sandbox.gasvisor.com/api/v2/gobjects/search/withinRadius?longitude=24.711117&latitude=48.922633&radius=10",
headers: {
'Authorization':'bearer'+acess_token },
success:function(data){
console.log(data);
}
})
}
They return json from server. I need to get data from Json file to my Angular listing. Pls help me.

Here is a simple example for one of your call:
$http({
method: 'POST',
url: 'http://sandbox.gasvisor.com:9988/uaa/oauth/token',
data: 'grant_type=client_credentials',
headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'Authorization':'Basic SVRXRV9XRUJfQVBQOml0d2VfY2xpZW50' },
}).then(function successCallback(response) {
// this callback will be called asynchronously
// when the response is available
$scope.response = response;
}, function errorCallback(err) {
// called asynchronously if an error occurs
// or server returns response with an error status.
$scope.error = err;
});

Related

How do you express it using the fetch API in JavaScript?

Now, I POST image data using ajax(jquery) as follows. The image is a File object.
async function postImage({ image }) {
const result = await $.ajax({
method: 'POST',
url: '/api/images',
dataType: 'json',
data: image,
processData: false,
async: true,
headers: {
'Content-Type': 'application/octet-stream',
},
});
return result;
}
The result that return object is {id: imageID}.
How can I express this using the Fetch API? I couldn't get the result even if I did the following.
const result = await fetch('/api/images', {
method: 'POST',
body: image,
headers: {
'Content-Type': 'application/octet-stream',
},
});
return result;
fetch() returns a promise to a Response object, and that has a json() method which returns another promise to the parsed response JSON.
const response = await fetch('/api/images', {
method: 'POST',
body: image,
headers: {
'Content-Type': 'application/octet-stream',
},
});
const result = await response.json();

Multiple URL http post request with Axios or any other method

I am looking to post multiple url to my server using http post method, i can not seems to find a solution to that.
Is it possible to do that with Axios http client or just simply making an Http Post Call ?
Axios Post request
axios({
method: 'post',
url: 'www.myurl.com',
dataType: "json",
contentType: "application/json",
beforeSend: function (xhr) {
xhr.setRequestHeader('Authorization', 'Bearer HkwWTBXekkrR0MybFlnUmc9');
},
success: function (data) {
console.log(data);
});
AJAX call method that i have tried that fails
Multiple url in same ajax call?
var urls = ["http://www.test.com/users/", "http://www.example.com/users/", "http://www.test.org/users/"]
$.each(urls, function(index, value) {
$.ajax({
url: value,
type: "POST",
data: (
answer_service: answer, expertise_service: expertise, email_service: email),
beforeSend: function (xhr) {
xhr.setRequestHeader('Authorization', 'Bearer 5YCwxCbWEvHIHO_nRvURIG5hP7s');
},
dataType: "json",
contentType: "application/json",
success: function (data) {
console.log(data);
Axios has an axios.all method which can handle multiple requests. (https://github.com/axios/axios)
const urls = [
"https://www.test.com/users/",
"https://www.example.com/users/",
"https://www.test.org/users/"
];
const generateRequests = () => urls.map( url => axios.get(url));
axios.all(generateRequests())
.then(axios.spread(function (acct, perms) {
// All requests are now complete
console.log('done', acct, perms);
}));
Few more examples:
https://www.storyblok.com/tp/how-to-send-multiple-requests-using-axios
https://github.com/sahat/hackathon-starter/blob/master/controllers/api.js#L37

ReferenceError: $ is not defined in angular ajax

I have written the code below:
postData: function(value1) {
return $.ajax({
method: "POST",
url: "http://my.url",
data: value1,
beforeSend: function(){},
complete: function() {
console.log("done");
}
});
}
And the error I receive is:
ReferenceError: $ is not defined
I call this service with:
Service.postData($rootScope.variable).then(function(res){
console.log(res);
});
How can I solve the aforementioned problem?
Create methods like this in angularJS Service:
someFuntion: function() {
var url = 'Your URL';
var deferred = $q.defer();
$http.get(url, {
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
}).then(function(data) {
deferred.resolve(data.data);
}, function(error) {
deferred.reject(error);
});
return deferred.promise;
},

How to send a rest PUT request in angular passing body

I need to send a rest request to a web server, I am using this code :
var getData = function(...) {
return $http({
method: "PUT",
url: getStatistics,
headers: {
'loginId': ...,
'token': ...,
'Content-Type': 'application/x-www-form-urlencoded',
},
data: {"...":"...","...":"...","...":"...","...":"...",
"...":"....","....":"...",
"datefrom":"2017-01-01","dateto":"2017-10-20"}
}).then(function(result){
var dataString = JSON.stringify(result.data);
alert(result.data);
return result.data;
});
};
The problem is that I am receiving error 400 bad request, What should I do?
The request works on Postman With this structure
https://i.stack.imgur.com/BBrwF.jpg
https://i.stack.imgur.com/NbQuO.jpg
Should it be a problem of how Am I passing the data object ?
That's how I implemented the $httpParamSerializerJQLike, it it Correct?
app.factory('statistics', function($http,$httpParamSerializerJQLike) {
var getData = function(loginId,token,id,dataInizio,dataFine,periodo,selezione) {
// Angular $http() and then() both return promises themselves
var data = '{"datefrom":"2017-01-01","dateto":"2017-10-20"}';
alert(data);
return $http({
method: "PUT",
url: getStatistics,
headers: {
'loginId': loginId,
'token': token,
'Content-Type': 'application/x-www-form-urlencoded',
},
data: { 'data': $httpParamSerializerJQLike(data)}
}).then(function(result){
var dataString = JSON.stringify(result.data);
alert(result.data);
return result.data;
});
};
return { getData: getData };
});
you're sending an x-www-form-urlencoded body, but it contains a single parameter named data, containing JSON.
You thus need
data: $httpParamSerializerJQLike({data: angular.toJson(data)})

Unable to upload file using angular JS and Spring controller

I am not understanding url: '/api/fileupload/',
$scope.uploadFiles = function () {
var request = {
method: 'POST',
url: '/api/fileupload/',
data: formdata,
headers: {
'Content-Type': undefined
}
};
// SEND THE FILES.
$http(request)
.success(function (d) {
alert(d);
})
.error(function () {
});
}
This is the code I used a while ago to upload xlm files using angular:
this.uploadFile = function($file) {
// $http() returns a $promise that we can add handlers with .then()
return $http({
method: 'POST',
url: restUrl + "/rest/data/upload",
data: $file,
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})
Also make sure you are accepting MediaType.MULTIPART_FORM_DATA on your server

Categories

Resources