authentication problems while using json data in AngularJS

Question

I am new to Angularjs and I am facing an issue while parsing a JSON response. I have created login page and for accessing data I have used JSON File. I am getting error when calling factory function.

HTML:

<form ng-submit="loginform(logcred)" class="ng-scope ng-pristine ng-valid center" name="logform"><br/><br>
<div>
  <label form="emailinput"><b>Email</b></label>
  <input type="email" class="form-control" name="uname" id="emailinput" placeholder="[email protected]" ng-model="logcred.username" >
</div>

<div>
  <label form="pwdinput"><b>Password</b></label>
  <input type="password" class="form-control" name="pwd" id="pwdinput" placeholder="*******" ng-model="logcred.password">
</div>

<div>
    <button type="cancel" class="btn" ng-click="toggle_cancel()">Cancel</button>
    <button class="btn btn-primary" ng-click="submit()">Login</button>
</div>
<br/>   
</form>

AngularJS :

app.factory('auth',function($http,session) {
var authService = {};

authService.login = function(userCred) {
$http.post('http://localhost:3000/loginfo',userCred)
.then(
  function successCallback(response){
  console.log(response);
  session.create(response.data.id);
  var user = response.data;
 if (user [user.username && user.password]) {
 var userCred = user[user.username && user.password];
 if (userCred.username == user.username && userCred.password == user.password) {
    $scope.signinfo = response.data;
} else {
    console.log('Error');
  }
 }
});
};

authService.isAuthenticated = function() {
 return {
 isAuthenticated : false,
 user : null
 }
};

return authService;
});         

var app = angular.module('logpp', []);
  app.controller('credientials', function($scope, $http,auth) {
$scope.logForm = {};

$scope.userCred = {
    username : '',
    password : ''
};

    /*-----Form Submition-----*/

$scope.log = function(){
    auth.isAuthenticated = true;
    if (!$scope.logForm.$invalid) {
        $scope.login($scope.userCred);
    } else {
        console.log('error');
        return;
    }
};

    /*-----Calling Factory Function-----*/

$scope.login = function(userCred) {
    auth.isAuthenticated = true;
    auth.login(function(user) {
        console.log('success');
    },function(error) {
        console.log("error");
    });
}

when I enter my username and password and click on login()btn , I am getting Possibly unhandled rejection in my console, I don't know why. I re-checked my code , when I submit the form , the error is getting generated from the factory function , I checked it in the console. But I am not understanding what mistake I am doing ?

Any help / advice would be greatly appreciated.

can you comment your console error. so i go through your error log — Naimish Mungara
– Naimish Mungara, Commented Oct 13, 2017 at 9:36
Possibly unhandled rejection: {"data":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>Error</title>\n</head>\n<body>\n<pre>SyntaxError: Unexpected token # in JSON at position 0<br> at Object.parse (native)<br> at createStrictSyntaxError — SRK
– SRK, Commented Oct 13, 2017 at 9:38
if you using via model in AJ then you don't want to pass argument in form action method, simply pass method name in Action and change button type like type='submit'. try it think so it's work. — Naimish Mungara
– Naimish Mungara, Commented Oct 13, 2017 at 9:42
@NaimishMungara . Just now i tried but again i got the same old error — SRK
– SRK, Commented Oct 13, 2017 at 9:50

Rakesh Burbure · Accepted Answer · 2017-10-13 10:01:13Z

1

Buddy, you have declared the main app variable as myApp, and attaching factory to app variable.

var myApp = angular.module('myApp', []);


app.factory('auth',function($http,session) {
    var authService = {};

Updated answer

var myApp = angular.module('myApp', []);


myApp.factory('auth',function($http,session) {
    var authService = {};

    authService.login = function(userCred) {
        $http.post('http://localhost:3000/loginfo',userCred)
        .then(
          function successCallback(response){
              console.log(response);
              session.create(response.data.id);
              var user = response.data;
              if (user [user.username && user.password]) {
                  var userCred = user[user.username && user.password];
                  if (userCred.username == user.username && userCred.password == user.password) {
                      $scope.signinfo = response.data;
                  } else {
                      console.log('Error');
                  }
              }
          });
    };

    authService.isAuthenticated = function() {
        return {
            isAuthenticated : false,
            user : null
        }
    };

    return authService;
});         


myApp.controller('credientials', function ($scope, $http, auth) {
    $scope.logForm = {};

    $scope.userCred = {
        username: '',
        password: ''
    };

    /*-----Form Submition-----*/

    $scope.log = function () {
        auth.isAuthenticated = true;
        if (!$scope.logForm.$invalid) {
            $scope.login($scope.userCred);
        } else {
            console.log('error');
            return;
        }
    };

    /*-----Calling Factory Function-----*/

    $scope.login = function (userCred) {
        auth.isAuthenticated = true;
        auth.login(function (user) {
            console.log('success');
        }, function (error) {
            console.log("error");
        }
        );
    }
});

edited Oct 13, 2017 at 10:01

answered Oct 13, 2017 at 9:52

Rakesh Burbure

1,04512 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SRK Over a year ago

Actually it'a typing mistake what i made. But that's not the error

Rakesh Burbure Over a year ago

Looks there was some ;, ) was missing. can u pls check now?

Collectives™ on Stack Overflow

authentication problems while using json data in AngularJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related