HTTP Get with looping password validation not working-CodePudding

I am new to HTML and Javascript. I am trying to display feedback on my form, so when a user types a matching password and username to what I have in my UserList object, it returns "login successfull" but I cant get this to work.

Heres a plunker if you want to see it in action: https://plnkr.co/plunk/SRS21GqLPAVgA5JU

Heres my code:

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

app.controller('MainCtrl', ['$scope', '$http', function($scope, $http){

  $scope.test = "Test Successful!";
  $scope.target =  'https://happybuildings.sim.vuw.ac.nz/api/brownsol/user_list.json'

  // retrieves userList JSON file from server
  $http.get($scope.target)
    .then(function successCall(response){
      $scope.output = "Successfully retrieved userList from the server"
      $scope.userList = response.data.users;
    }, 
    function errorCall(response){
      $scope.output = "Error retrieving userList from the server "
      $scope.output  = " - ErrorCode = "
      $scope.output  = response.status;
    });

  $scope.loginValidator = function() {


    for(var i = 0; i < userList.length; i  ) {

      if ($scope.usernameInput == userList[i].LoginName && $scope.passwordInput == userList[i].Password) {
        $scope.feedback = 'Login Successful';
        return true; 
      };
    };
    
    $scope.feedback = 'Login Failed';
};

}]);

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="style.css">
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>{{test}}</p>
    <p>{{output}}</p>
    <p>{{userList}}</p>

    <div>
      <form>
        log in
        <input type = "text" placeholder = "username" ng-model = "usernameInput"></input>
        <input type = "password" placeholder = "password" ng-model = "passwordInput"></input> 
        <button type = "submit" placeholder = "login" ng-click = "loginValidator()">login</button> 
            <p>{{feedback}}</p>
      </form>
    </div> 
    <p>the first username: {{userList[0].LoginName}}</p>
    <p>the first password: {{userList[0].Password}}</p>
  </body>

</html>

CodePudding user response：

Typo in function $scope.loginValidator. Instead of $scope.userList, You have used userList Which is not defined. Check console for error.

$scope.loginValidator = function() {

    for(var i = 0; i < $scope.userList.length; i  ) {

      if ($scope.usernameInput == $scope.userList[i].LoginName && $scope.passwordInput == $scope.userList[i].Password) {
        $scope.feedback = 'Login Successful';
        return true; 
      };
    };