AngularJS User Login to Json file

Question

I am currently trying to create a user login page where the user information is stored on a json file. I have created my GET method to the file but I cannot seem to redirect after the user has logged in successfully. Can you help me out?

I know that user login and validation done on the client side is A BAD IDEA but that is how I want to do it, without using a database.

Here is my HTML code:

<body ng-controller="myCtrl">
    <form id="login-form">
            <h3>User Login</h3>
                   <div class="form-group">
                    <label for="email">Email address:</label>
                    <input type="email" class="form-control" id="email">
                    </div>

                  <div class="form-group">
                    <label for="pwd">Password:</label>
                    <input type="password" class="form-control" id="pwd">
                  </div>
                  <button type="submit" class="btn btn-default" id="login-button" ng-click="LogOn()">Login</button>
        </form>
</body>

My JavaScript code:

var app = angular.module('myApp', [ ]);
                app.controller("myCtrl",['$scope', '$http', function($scope, $http){
                $scope.LogOn = function(){
                    $http.get('data.json').then(function(data){
                    $scope.users = data;
                    });
     if (data.email == email) && (data.password = password{
            window.location.href = 'www.google.com';
          }             
                    };  
                }]);

My JSON File:

[
    {
        "email":"[email protected]",
        "Password":"password"
    },
    {
        "email":"[email protected]",
        "password":"test999"
    },
    {
        "email":"[email protected]",
        "password":"xxx"
    }
]

You might want to look into ngRoute or ui.router.

skubski
– skubski

2017-03-22 14:05:51 +00:00
Commented Mar 22, 2017 at 14:05 — skubski
– skubski, Commented Mar 22, 2017 at 14:05

Dilip D · Accepted Answer · 2017-03-22 14:43:17Z

3

Please try to open the link and check and run the code which is deployed in w3 schools https://www.w3schools.com/code/tryit.asp?filename=FDVZY3NXVYG6

answered Mar 22, 2017 at 14:43

Dilip D

5751 gold badge5 silver badges28 bronze badges

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

Comments

Joao Leal · Accepted Answer · 2017-03-22 14:20:44Z

0

Put redirection code inside then

$http.get('data.json').then(function(data){
          $scope.users = data;
          if (data.email == email && data.password == password) {
            window.location.href = 'www.google.com';
          }   
});

edited Mar 22, 2017 at 14:20

Joao Leal

5,5521 gold badge15 silver badges23 bronze badges

answered Mar 22, 2017 at 14:08

Ankur

3,2095 gold badges30 silver badges57 bronze badges

1 Comment

skubski Over a year ago

You're comparing an array of data against two strings. You'll need to loop the users and match every user and password if you want to be able to enter your if stack.

kidwon · Accepted Answer · 2017-03-22 14:29:21Z

0

Obviously the if bellow has to be inside the .then( callback

if (data.email == email && data.password == password) {
   window.location.href = 'www.google.com';
}

edited Mar 22, 2017 at 14:29

answered Mar 22, 2017 at 14:06

kidwon

4,5425 gold badges31 silver badges46 bronze badges

2 Comments

ZombieChowder Over a year ago

Uncaught ReferenceError: Invalid left-hand side in assignment - if (data.email == email) && (data.password = password)

ZombieChowder Over a year ago

Yes but checking the code if it runs in the first place is a vital part of giving an actual working answer. Thanks for your effort tho'

Collectives™ on Stack Overflow

AngularJS User Login to Json file

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related