【问题标题】:How do I loop through an object and compare the results to an input如何循环遍历对象并将结果与​​输入进行比较
【发布时间】:2017-07-15 21:48:35
【问题描述】:

我正在构建一个 Web 应用程序并且需要构建一个登录站点。如何循环遍历此 javascript 对象并将登录表单上的用户输入(目前仅需要电子邮件(“EML”))与数据进行比较,以确保输入正确?我试图做点什么,但只是想出了下面的 for 循环,这只是一团糟。 (对象在一个单独的 js 文件中) 谢谢!

function validate() {
    var un = document.login.username.value;
    var pw = document.login.password.value;
    var valid = false;

    for (var key in responseData) {
        if (responseData.hasOwnProperty(key)) {
            for (var i = 0; i < key.length; i++) {
                if (un == key[i]) {
                    valid = true;
                    break;
                }
            }
          }


    if (valid) {
        alert("Login was successful. Welcome, " + un + ".")
        window.location = "https://www.google.com";
        return false;
    }
}
var responseData = {
  authenticatUser: {  
   "ERR":0,
   "RSP":{  
      "AUTHC":"true",
      "USR":{  
         "ID":"2",
         "TJT":"FULL",
         "ACTV":"true",
         "BO":"1489760664786",
         "CONT":{  
            "FNM":"John",
            "LNM":"Doe",
            "PHN":"5556667777",
            "PHNTP":"NONE",
            "EML":"ex@mple.com",
            "EMLTP":"NONE"
         },
         "ADMIN":"false",
         "LLOGN":"1489760664786",
         "ACCT":{  
            "ID":"2",
            "TJT":"ID"
         }
      }
   }
},
    getUserAccountDetails: {  
   "ERR":0,
   "RSP":{  
      "ACCT":{  
         "ID":"2",
         "TJT":"FULL",
         "ACTV":"true",
         "BO":"1489760664786",
         "LU":"1489760664786",
         "NM":"Name",
         "DESC":"Description",
         "CONT":{  
            "FNM":"John",
            "LNM":"Doe",
            "PHN":"5556667777",
            "PHNTP":"NONE",
            "EML":"ex@mple.com",
            "EMLTP":"NONE"
         },
         "ADDRM":{  
            "STRT":"1 Miracle Way",
            "CITY":"San Antonio",
            "STATE":"Texas",
            "ZIP":"78245"
         },
         "ADDRB":{  
            "STRT":"1 Miracle Way",
            "CITY":"San Antonio",
            "STATE":"Texas",
            "ZIP":"78245"
         },
         "TZ":"US_CT",
         "LICS":"1",
         "REPOS":[  
            {  
               "ID":"2",
               "TJT":"ID"
            },
            {  
            }
         ],
         "USRS":[  
            {  
               "ID":"2",
               "TJT":"ID"
            },
            {  
            }
         ]
      }
   }
}

};

【问题讨论】:

  • 如果你问如何访问 js 对象内的嵌套属性,你会找到答案right here。还必须警告您,以纯 JSON 格式存储和访问用户信息并不是创建登录页面的一种非常安全的方法。

标签: javascript arrays json loops object


【解决方案1】:

首先,您不应该在客户端验证登录详细信息或以纯文本形式保存客户端详细信息,我假设您知道这一点,但您只是在学习。

for (var key in responseData) {
        // THIS IS REDUNDANT
        // YOU GOT THE KEY FROM THE OBJECT SO THIS ISN'T
        // NECESSARY 
        if (responseData.hasOwnProperty(key)) {
            // ITERATING OVER THE LENGTH OF THE KEY
            // DOESN'T MAKE A LOT OF SENSE
            // You're not in fact iterating over the object
            for (var i = 0; i < key.length; i++) {
                if (un == key[i]) {
                    valid = true;
                    break;
                }
            }
          }

您要做的是将json响应数据简化为

{
   "accounts" : [
      {
       "id" : "xxxxxxx",
       "username" : "xxxxxx",
       "password" : "xxxxxx"
      },
      {
       "id" : "xxxxxxx",
       "username" : "xxxxxx",
       "password" : "xxxxxx"
      },
      {
        "id" : "xxxxxxx",
       "username" : "xxxxxx",
       "password" : "xxxxxx"
      }
  ]
}

然后您将像这样检查用户凭据:

let data = JSON.parse(responseData);
found = false;
for(var account in data.accounts)
{
    if(account.username === un && account.password === pw)
    {
        found = true;
        break;
    }
}

if(found)
{
    //POST user id back to server to get details
}

请注意,我不建议以这种方式进行身份验证。如果您想很好地模拟,您应该运行某种类型的简单 apache php 或节点服务器,它们将接受用户名和密码并验证服务器端并将结果返回给您。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2021-10-13
    • 2023-01-31
    • 1970-01-01
    • 1970-01-01
    • 2014-01-23
    • 1970-01-01
    • 2010-09-07
    • 1970-01-01
    相关资源
    最近更新 更多