restangular post return value is undefined - post

I use restangular to create albums,
createAlbum:function(obj){
albumlist.post(obj.data).then(function(res){
console.log(res)
obj.success(res)
},function(err){
obj.error(err)
})
}
and I call the service like this
$scope.createAlbum = function(){
albumService.createAlbum({
data:$scope.newalbum,
success:function(data){
$scope.albumlist.push(data)
},
error:function(err){
alert('error'+err.status)
}
})
}
but after the album successfully posted the console.log(res) always undefined , any thing wrong with my code?

Check the network tab to see if your POST request is actually returning something. If it's not, then that's the issue :).
Otherwise it should log something.

Related

Oidc-client-js trigger login when app start.What is the correct way?

i am using identity server 4 and oidc-client-js for auth, with angular frame work. I faced it this issue,
I am trying to trigger login redirect when application start. First i tried this code;
this.authService.userManager.getUser().then((user) => {
if (!(user)) {
this.authService.userManager.signinRedirect();
}
});
and user always returning null. Then i tried the same code with timeout, like this;
this.authService.userManager.getUser().then((user) => {
setTimeout(() => {
if (!(user)) {
this.authService.userManager.signinRedirect();
}
}, 2000);
});
after that, everything works good. But i'm not comfortable about using timeout. I tried using subject in callback component signinRedirectCallback, i tried userLoaded event but i can't succeeded. And finally i wrote this code;
In app component ngOnInit;
if (!this.authService.currentUser) {
this.authService.userManager.signinRedirectCallback().then((user) => {
// this.authService.userLoadedSub.next(user);
this.authService.currentUser = user;
console.log("01");
//navigate related route
this.initData();
}).catch((err) => {
console.log("signinRedirectCallback Error", err);
this.authService.userManager.signinRedirect();
});
}
Is this a good way to what i need? Is there any other way?
Many thanks for yor helps.

trying to store image as base64 and using it

I have a block of code that I found online and it seems to be working and not working at the same time. I think its probably my lack of understanding but I cant seem to get it to work the way I want it.
selectPicture() {
let context = imagepicker.create({
mode: "single" // use "multiple" for multiple selection
});
var imageBase64
context
.authorize()
.then(function() {
return context.present();
})
.then(function(selection) {
selection.forEach(function(selected) {
imageSourceModule.fromAsset(selected).then((imageSource) => {
imageBase64 = imageSource.toBase64String("jpg",60);
console.log("Image saved successfully!")
console.log(imageBase64)
console.log("test test") //runs fine
this.image = "~/assets/images/account/camera.png" //cant seem to run
console.log("test test 2")
}).catch(function (e) {
// process error
console.log("got error 1")
});
})
}).catch(function (e) {
// process error
console.log("got error 2")
});
},
Within the imageSourceModule.fromAsset(selected).then((imageSource), I was trying to save the base64 info in another variable but cant seem to do anything within other than console log a string. When I run this.image = "~/assets/images/account/camera.png" (just a placeholder, even calling a method does not work too) for example it catches an error.
What could the problem be? thank you!
UPDATE
I changed console.log("got error 1") to log the actual update and what i got was:
undefined is not an object (evaluating 'this.image = "~/assets/images/account/camera.png"')*
I now think that theres a problem with my understanding calling variable outside. My variable 'image' is within the script at
data() {
return {
image : ""
}
}
first of all check what this variable is, because you do not use es6 arrow functions, so this is probably not the vue instance.
the second thing: when you change vue-variables asynchronously use the $set method, like: this.$set(this, 'image', '~/assets/images/account/camera.png')

Vue.JS Axios POST request .then method

Im stuck!
I'm sending a POST request to a server via AXIOS from a VUE app.
Everything works and the server responds.
The problem is, that the .then method never gets called. How could that be?
Bonus question how are you doing your requests from VUE?
Many thanks
methods:{
customMethod1: function() {
//AXIOS
var config = {
headers: {'My Custom Header 1': 'Header-Value'}
};
//POST request
axios.post('http://192.168.56.101:5000/post1', {name: 'Dave'}, config)
.then(function(response){
alert("posted successfully");
});
},
}
Have you confirmed via a tool like Fiddler that the server actually sends a response? It could be that the server never actually responds.
I just found the solution, and I don't know if I should share it with the person who posted this question : he could at least answer to the others trying to help him.
As I find many answers here I post my solution (maybe not the correct answer but it works)
It's not a vue.js issue, nor axios, the .then statement is called only when you return something on server side.
Some code to explain :
Product.update(
{
productName: req.body.productName,
productDesc: req.body.productDesc,
productOwner: 0,
productImage: req.body.productImage,
productState: req.body.ProductState,
productPrice: req.body.ProductPrice
},
{
where: {
id: req.body.id
}
})
.then(function (item) {
console.log("Product update " + item.id);
res.send({id: item.id});
})
.catch(function (err) {
console.log("Product update error " + err);
});
the important line here is :
res.send({id: item.id});
If you return nothing at server side your .then at client side is not called.
let me know if it works but +1 me ;-)

$http error handling in AngularJS

$http in my AngularJS project not able to recognize 40X(401,403,405...) errors on iOS.
I am using 1.2.10 AngularJS version and Cordova version 3.4.0.
Below is the code I am using:
TE_SERVICES.factory('hello',function ($http,$rootScope) {
return {
loginUser: function(userCredentials,successCallback,errorCallback){
$http({
method: "GET",
url: "data/example.json",
headers: {"Authorization":'Basic '+userCredentials},
}).then(function(response){
successCallback(response.data);
console.log("Success------"+JSON.stringify(response))
},function(data, status, headers, config){
errorCallback(data);
console.log("Error------"+JSON.stringify(data)+" "+status)
})
}
}
});
hello.loginUser($rootScope.encodedUserCredencials,function(persons) {
// success handler
}, function(data) {
// error handler
console.log(data.status+"===="+status)
});
data.status is returning 0 and status returns undefined.
Please help me to resolve this issue.
Tried to include the domain in whitelist on IOS.But no solution :( It still gives the same response.
But the same code works absolutely fine in Android.
Please help me to resolve this issue.
Thanks in advance :)
So you r using the $http from angular. Do you use the error callback or the second function in the then callback ?
Example
$http.get("someUrl")
.success(function(response){}) // if http code == 200
.error(function(response){}) // else
Or with then, that can take 2 functions. The first is the onSuccess, the second the onError function.
$http.get("someUrl")
.then(function(response){
// if http code == 200
},
function(response){
// else
});
The response parameter does also contain the error codes.
Consider using a $httpInterceptor to handle all errorcodes at the same place, instead handling them in every http callback.
UPDATE:
It seems, that the angular doc is incomplete/wrong for the success callback.
It doesnt pass 4 parameter there. It does pass a response object that contains all the information about request+response and the passed data.
Update to the edit:
Dont write callbacks by yourself. Use angular promises:
TE_SERVICES.factory('hello',function ($http,$rootScope) {
return {
loginUser: function(userCredentials){
return $http({
method: "GET",
url: "data/example.json",
headers: {"Authorization":'Basic '+userCredentials},
}).then(function(response){
return response.data;
},function(response){
return response;
});
}
}
});
hello.loginUser($rootScope.encodedUserCredencials)
.then(function(persons) { // success handler
}, function(data) { // error handler
console.log(data);
});
Try this and tell me if the console.log logs something.
I had exactly the same problem. Cordova app, angular js, IPhone and 401 requests are not received in angular js http interceptor. They work fine on android devices.
My finding was that IPhone browser is handling those at a higher lever and trying to use WWW-Authenticate information to do authentication. This is why the response does not get to angular.
The only solution I found, was to change my service to return 400 instead of 401 in case of an api request. In this case I return 400 with an error message that I handle on client side.
I hope this helps.
My issue with the 403 status code was that my backend returned a response with status 403 but the body of a response did not contain a JSON string. It contained just a string - Authentication Failed.
The rejection variable was an object Error.
I encoded the body and the rejection variable contains a valid response error object.
To handle HTTP errors I use interceptors.
$httpProvider.interceptors.push(function($q, $location, redirect, HTTP_CODES) {
return {
'responseError': function(rejection) {
if (rejection.status === HTTP_CODES.FORBIDDEN) {
redirect('/login', $location.url());
}
return $q.reject(rejection);
}
};
});

Backbone callback functions, success not triggering code

I'm doing a simple AJAX call to append an album's tracks in an unordered list. It will append the tracks on the second click with this code:
window.app.views.AlbumView = Backbone.View.extend({...
events: {
'click .queue-add' : 'selectAlbum',
'click .show-tracks' : 'showTracks',
'click .hide-tracks' : 'hideTracks',
},
showTracks: function(){
_this = this
this.model.getTracks().forEach(function(track){
_this.$el.find('.tracks').append("<li>"+track.attributes.title+"</li>");
});
},
Clearly the tracks hadn't been fetched in time for the first click so I added a callback function to the showTracks method like so:
showTracks: function(){
_this = this
this.model.getTracks({
success: function(tracks){
console.log(tracks);
tracks.forEach(function(track){
_this.$el.find('.tracks').append("<li>"+track.attributes.title+"</li>");
});
}
});
},
Yet it won't enter the block and the console.log(tracks); puts nothing to the console.
Any tips would be really awesome here, thanks!!
app.models.Album = Backbone.Model.extend({
....
getTracks: function() {
this.tracks.fetch();
return this.tracks
},
....
});
I couldn't find where did you invoke that callback. you may need modify "getTracks" method like this:
getTracks: function(callback) {
this.tracks.fetch();
callback(this.tracks); //you need to invoke the callback before return
return this.tracks;
}
This is called "callback pattern", google it will find more.
and the backbone model's fetch method accept option argument, It is a object with two keys -- success and error -- both are function. If you provide this argument, backbone will call them automatically.
hope this help.

Resources