如何比较输入和 JSON 数据答案

【问题标题】：How to compare Inputs and JSON data如何比较输入和 JSON 数据
【发布时间】：2019-02-15 05:24:23
【问题描述】：

我正在做一个学校项目，我需要在不制作真实数据库的情况下验证一些用户。我的问题是，当我将输入中输入的信息与存储在 JSON 中的信息进行比较时，它会为每个不匹配的选项弹出一个错误。我想要的是将多个错误减少为一个（以防用户名或密码与存储在 JSON 中的信息不匹配）。这是我的 JavaScript：

const form = document.querySelector('form');

form.addEventListener('submit', function(e){
	e.preventDefault();
    
    const emailInput = document.querySelector('#email').value;
	const pwdInput = document.querySelector('#pwd').value;

	const object = {
		email: emailInput,
		pwd: pwdInput
	};

fetch('users.json')
  .then(res => res.json())
	.then(data => {
		data.forEach(function(user) {

			const userInfo = JSON.stringify(user);
			const databaseInfo = JSON.stringify(object);


			if(userInfo === databaseInfo) {
					console.log('success');
			} else {
				console.log('err');
			}

		});
	})

	.catch(error => console.log('error'));

});

这是用 JSON 制作的假数据库：

     [
      {"email": "James", "pwd": "1111"},
      {"email": "Peter", "pwd": "2222"},
      {"email": "Josh", "pwd": "3333"}
     ]

【问题讨论】：

您似乎应该比较值而不是对象。所以像user.email === object.email && user.pwd === user.pwd) 你的JSON.Stringify 这样的东西也可能是不必要的。然后，对于您仅有的 1 个错误位，您可以添加一个名为 found 的布尔值，如果上述条件为真，则将其设置为 true。然后在循环之外检查该变量，如果它的false 记录一个未找到的错误
您需要== 而不是===。示例代码：jsfiddle.net/khrismuc/j3g950kq
嘿！感谢您的回复，但我是 JavaScript 新手，不理解您所说的关于布尔值的最后一部分。我试过这个但没有奏效： if(user.email === object.email && user.pwd === object.pwd) { var flag = true; console.log('succ'); } else if (flag = false) { console.log('err'); }
@Santiago 在 forEach 循环之前将标志初始化为 false，如果找到则将其设置为 true。下一步是在 forEach 循环之外检查一次

标签： javascript arrays json error-suppression

【解决方案1】：

使用原生 JavaScript：

// This is only to simulate your fetch from JSON
function fakeFetch () 
{
  return Promise.resolve([
    {"email": "James", "pwd": "1111"},
    {"email": "Peter", "pwd": "2222"},
    {"email": "Josh", "pwd": "3333"}
  ]);
}

const form = document.querySelector('form');

form.addEventListener( 'submit', function(e){
  e.preventDefault();
    
  const emailInput = document.querySelector('#email').value;
  const pwdInput = document.querySelector('#pwd').value;

  const object = {
    email: emailInput,
    pwd: pwdInput
  };

  fakeFetch()     
  .then( users => {
   
    // Check each user in users and try to find a match
    for ( let user of users )
    {
      // Destructuring email and password from the current user
      let { email, pwd } = user;
      
      // Comparing email and pwd from active user with the ones in object
      if ( email === object.email && pwd === object.pwd )
      {
        // Found, do something
        console.log( 'found!' );
        return;
      }
    }
    
    // Not found, do something else
    console.log( 'Not found...' );
    
  })
  .catch(error => console.log( error ) );

});

<form>
  <input type="text" id="email"/>
  <input type="test" id="pwd"/>
  <input type="submit"/> 
</form>

【讨论】：

【解决方案2】：

我尝试在 cmets 中进行解释，但可能更容易向您展示。我认为最好比较尽可能少的数据（而不是大的 JSON 字符串），例如电子邮件到电子邮件和密码到密码。

所以我更改了您的if 以进行更简单的比较。

要将所有错误合并为一个，您可以包含一个标志并将其设置为true（如果找到匹配项）。然后在 forEach 循环之外，您可以检查该标志并仅记录 1 个错误（如果不匹配）

var users = [{
  email: "user1",
  pwd: "pass1"
}, {
  email: "user2",
  pwd: "pass2"
}];

var object = {
  email: "user3",
  pwd: "pass3"
};

var isMatch = false;
users.forEach(function(user) {
  if (user.email === object.email && user.pwd === object.pwd) {
    console.log("success");
    isMatch = true;
  }
});

if (!isMatch) {
  // only logs once even though there are multiple users
  console.log("No Match!");
}

【讨论】：

【解决方案3】：

你的函数的主要思想是，给定一个元组（用户名，密码），检查它是否存在于你的数据库中，在这种情况下是一个对象数组。您可以说您想从数组中过滤用户名和密码与用户插入的内容相匹配的条目。由于不应该有重复的用户名/密码元组，您的过滤器应该返回匹配的元组或 null。

对此的一种方法可能如下：

function verifyLogin(loginObject) {
  return new Promise((resolve, reject) => {
    fetch('users.json')
      .then(res => res.json())
      .then(data => data.filter(entry => entry.email ===
loginObject.email && loginObject.pwd === object.pwd).length > 0 ? resolve(true) : resolve(false))

      .catch(error => reject(error));

  });
})

}

verifyLogin(loginObject)
  .then(result => result === true ? console.log('Login successful!') : console.log('Login failed'))
  .catch(error => console.log(error))

通过这种方式，代码可以显示您要完成的工作，并且不会产生副作用。

【讨论】：