【问题标题】:Javascript Looping through JSON an array of object sJavascript通过JSON循环对象数组
【发布时间】:2018-04-19 09:31:28
【问题描述】:

所以我有一个登录表单,我想检查输入的名称和密码是否已经存在于 JSON 对象中,这两种情况都会提示不同的消息,但问题是它做得不对,这里是代码为了更清楚:

     function registerInfo(){
     var name = document.forms[0].username.value;
     var pw = document.forms[0].pw.value

    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var response = JSON.parse(xhttp.responseText);
        console.log(response);

    if (name === "" || pw === "") {
    alert ('please complete all the forms')
    } 

    for (var i = 0; i < response.loginfo.length; i++){
      if ( name === response.loginfo[i].username && pw === 
            response.loginfo[i].password) {
        alert('Welcome back ' + name);
        break;
        } // if statement curly braces
    } // loop curcly braces 

    for (var i = 0; i < response.loginfo.length; i++){
        if ( name != response.loginfo[i].username && pw != response.loginfo[i].pw){
        alert('Welcome here new ');
        break;
        } // if statement curcly braces 
        } // for 
      } // ready state if statement curly braces
    } // function curly braces
    xhttp.open("GET", "login.json", true);
    xhttp.send();

    return false;
   }

这是用于快速测试的 JSON 对象

     {
      "loginfo" : [
      { 
          "username" : "moh",
          "password" : "lol"
      },
      {
          "username" : "zaki",
          "password" : "123"
      }         
      ]
      }

问题是当用户输入 JSON 对象 ID 中存在的用户名和密码时,会提示“欢迎回来!” ,还有我不想的“欢迎来到新”,因为最新的警报是针对新用户的,他们的凭据在 JSON 对象中不存在。

【问题讨论】:

  • 你会在哪里使用这个?为什么不在服务器上执行此操作?
  • 最简单的修复 - 在第一个循环中使用 break,而不是 return
  • 我实际上正在构建一个小测验应用程序来应用我学到的关于 js 的东西,所以我在 localhost 上运行它并玩弄基本的东西!
  • @Luca,我相信他们正在在服务器上执行此操作,这就是 XMLHttpRequest 对象的意义所在。
  • @Bjonnfesk 这是一个本地主机!

标签: javascript arrays json object


【解决方案1】:

如果找到匹配项,最简单的修复是不允许执行第二个 for 循环,所以

  • 如果找到匹配项,则设置一个标志,如果设置了该标志,则不执行第二个 for 循环。

  • Return 而不是从第一个 for 循环中中断。

但是,您可以通过使用 Array.prototype.some 检查是否有任何值匹配来减少代码的冗长

var hasMatch = response.loginfo.some( s => s.username === name && s.password === pw );

hasMatch 如果找到匹配项,则返回 true

alert( "Welcome " + (hasMatch ? "back" + name : "here new" ) );

【讨论】:

  • Array.prototype.some 是 ES6 的新特性?没有?
  • 自 es5 以来没有一些,但箭头函数来自 es6
  • 所以你的意思是return语句意味着实际循环之后的任何循环都不会在代码中执行?
  • @ZakariaSichaib 是的,在return 之后没有其他语句在执行function
  • 还有一个问题,真正学习和理解语言的关键是什么?通常是“继续建造东西”?
猜你喜欢
  • 2021-10-30
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-10-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-10-18
相关资源
最近更新 更多