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="angular.js@1.4.x" 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>
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;
};
};