在显示警报之前，遍历数组中的所有元素

Question

I want to check an array of usernames and passwords to authenticate user. The code I have stops at every element of the array and displays alert. how can I have it loop through the entire array then show alert.

for(i= 0 ; i< user.length; i+=1) {
  if (username === user[i].username && password === user[i].password) {

    alert("Log In Successful");

    document.getElementById("btn").style.display= "none"
    document.getElementById("navbar-user").innerHTML = username;
    modal.style.display= "none";
  } else {
      alert("Username or Password Incorrect")
  } 

Answer 1

I assume you would like to stop when you find the correct username password combination anyways. So your ELSE is breaking the loop because it is executed on every run.

Here is proposal:

var success = false;

for(i= 0 ; i< user.length; i+=1) {
  if (username === user[i].username && password === user[i].password) {
     success = true; 
  } 
}

if(success){
    alert("Log In Successful");

    document.getElementById("btn").style.display= "none"
    document.getElementById("navbar-user").innerHTML = username;
    modal.style.display= "none";
}else{
    alert("Username or Password Incorrect"); 
}

Now code will run and complete all elements in array, if user is found it will set success to true , and alter it otherwise it is false by default.

Answer 2

Here's a more functional approach using find to search the user array for a match before continuing.

let successfulLogin = user.find(u => {
    return u.username === username && u.password === password;
});

if(successfulLogin) {
    alert("Log In Successful");
    document.getElementById("btn").style.display = "none"
    document.getElementById("navbar-user").innerHTML = username;
    modal.style.display = "none";
} else {
    alert("Username or Password Incorrect");
}

Answer 3

Using Array some() Method:

if (! user.some(u => username === u.username && password === u.password) )
    alert('Username or Password Incorrect');

Answer 4

Hope you are just testing your code including passwords in the client side .

 let alertSucc =true; for(i= 0 ; i< user.length; i+=1) { if (username === user[i].username && password === user[i].password) { document.getElementById("btn").style.display= "none" document.getElementById("navbar-user").innerHTML = username; modal.style.display= "none"; } else { alertSucc =false; } } alertSucc ? alert("Log In Successful"):alert("Username or Password Incorrect"); 

Answer 5

Using a couple returns and moving down your alert outside of the if statement will help because return will kick out of the current iteration of the loop

for(i= 0 ; i< user.length; i+=1) {
  if (username === user[i].username && password === user[i].password) {
    alert("Log In Successful");
    document.getElementById("btn").style.display= "none"
    document.getElementById("navbar-user").innerHTML = username;
    modal.style.display= "none";
    return;
  } else {
    console.log("We haven't proven whether true or false.
    return;
  } 
  alert("We did not find proper credentials that were true, and tested all inputs")
}

Answer 6

It is not clear if you want to show SUCCESS on all valid or on 1 valid user? And I pray that logic never ever reaches the world! :)

let userGOOD = [{username: "a", password: "b"}, {username: "a", password: "b"}];
let userBAD = [{username: "a", password: "b"}, {username: "a", password: "c"}];
let test = (username, password) => (user) => username === user.username && 
password === user.password;
let testAB = test("a", "b");
let GOOD = userGOOD.reduce((p, c) => p && testAB(c), true);
let BAD = userBAD.reduce((p, c) => p && testAB(c), true);