如何比较输入和JSON数据

Question

I'm working on a school project and I need to validate some users without making a real Database. My problem is that when I compare the information entered in the inputs with the information storaged in JSON, it pops an error for every option that doesn't match. What I want is to reduce the multiple errors into only one (in case that the username or the password doesn't matches with the information storaged in JSON). Here is My 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')); }); 

And here is the fake database made with JSON:

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

Answer 1

Using vanilla 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> 

Answer 2

I tried explaining in the comments, but its probably easier to show you. I think its better to compare the smallest amount of data possible (rather than a big JSON string), like email to email and password to password.

So I changed your if to do a more simpler compare.

To condense all your errors into one, you can include a flag and set it to true if a match is found. Then outside the forEach loop you can check that flag and log just 1 error (if there is no match)

 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!"); } 

Answer 3

The main idea of your function is to, given a tuple (username, password), check if it exists in your database, which is an array of objects in this case. You could say you want to filter from the array the entries whose username and password match what was inserted by the user. Since there should be no repeated tuples of username/password, your filter should either return the matching tuple or null.

An approach for this could be the following:

 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)) 

This way the code shows what you are trying to accomplish and does it with no side effects.