使用AngularJS解析JSON响应中的问题。

I am new using Angularjs and I am having an issue parsing a JSON response. I have login credentials like Username and password and I am trying to parse it , when user clicks on the login button(). If the name and password matched in the following server , I should get success message. This is the HTML code I am using:

我是使用Angularjs的新手，在解析JSON响应时遇到了问题。我有登录凭证，比如用户名和密码，当用户单击login按钮()时，我尝试解析它。如果以下服务器的名称和密码匹配，我将获得成功消息。这是我正在使用的HTML代码:

<form ng-submit="loginform()" name="logform"><br/><br>
<tr ng-repeat="logcred in signinfo"></tr>

<div>
 <label form="emailinput"><b>Email</b></label>
 <input type="email" class="form-control" name="uname" id="emailinput" placeholder="you@example.com" 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>

<a ng-click="reloadPage()" class="navbar-brand" ></a>

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

This is the Javascript code using AngularJS:

这是使用AngularJS的Javascript代码:

app.controller('credientials', function($scope,$http) {
$scope.loginform = function (username, password){
$http.get('http://localhost:3000/loginfo')
.then(
    function successCallback(data){
    $scope.response = data;
if($scope.username === 'response.username' && $scope.password === 'response.password'){
    $scope.signinfo = data.loginfo;
}
else{
    console.log("Error");
    }
})
});

The HTML is showing the variable $scope.response with the JSON returned by the server, but I don't know how to authentication it properly.

HTML显示变量$scope。使用服务器返回的JSON进行响应，但是我不知道如何正确地验证它。

What am I doing wrong?

我做错了什么?

Any help / advice would be greatly appreciated.

如有任何帮助或建议，我们将不胜感激。

1 个解决方案

#1

EDIT

编辑

Check updated snippet of authentication at client side.

检查客户端更新的身份验证片段。

if(userData.username == response.data.username && userData.password === response.data.password){
      $scope.signinfo = response.data 
}

You will get userData variable from form submit button .. see how i am passing username and pasword to controller using ng-submit="loginform(logcred)"

您将从表单提交按钮获得userData变量。查看我如何使用ng-submit=“loginform(logcred)”将用户名和pasword传递给控制器

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

myApp.controller('credientials', function($scope, $http) {
  $scope.loginform = function(userData) {
    console.log(userData);
    $http.post('https://reqres.in/api/users', userData) // here in post rew i am passing username and password to mock api
      .then(function(response) {
       //as suggested by you in response u will get username = admin@evol.com password = admin;   
        console.log(response)
        if(userData.username == response.data.username && userData.password === response.data.password){
            $scope.signinfo = response.data 
        }
      });
  }
});

//**NOTE** in above HTTP call you use your url `http://localhost:3000/loginfo` and in your serverside get the username from the request and check password for that username in your database. If password matches with what you have entered then send  success message or user details back to client side.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div ng-app="myApp" ng-controller="credientials">
  <form ng-submit="loginform(logcred)" name="logform">
    <br/>
    <br>
   {{signinfo}}

    <div>
      <label form="emailinput"><b>Email</b></label>
      <input type="email" class="form-control" name="uname" id="emailinput" placeholder="you@example.com" 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>

    <a ng-click="reloadPage()" class="navbar-brand"></a>

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

in above HTTP call you use your url http://localhost:3000/loginfo and in your serverside get the username from the request and check password for that username in your database. If password matches with what you have entered then send success message or user details back to client side.

在上面的HTTP调用中，您可以使用url http://localhost:3000/loginfo，在您的serverside中，从请求中获取用户名，并在数据库中检查该用户名的密码。如果密码与您输入的密码匹配，则将成功消息或用户详细信息发送回客户端。

where should i apply if condition, to match the usercredentials?

如果条件匹配usercredentials，我应该在哪里应用呢?

You need to check if condition in the server side logic where u fetch data from database. like in your server (i.e. in /loginfo)

您需要检查服务器端逻辑中的条件，即从数据库获取数据。比如在你的服务器(例如在/loginfo)

if(userpassword == passwordfromDB){
  //send success message to client side
}

#1