Member Avatar for Nicholas_27

my code have issue will show both if and else alert when key in information in web.

/* fetch('people.json')
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    appendData(data);
  })
  .catch(function (err) {
    console.log(err);
  });

  function appendData(data) {
    var mainContainer = document.getElementById("myData");
    for (var i = 0; i < data.length; i++) {
        var div = document.createElement("div");
        div.innerHTML = 'Name: ' + data[i].username + ' ' + data[i].password;
        mainContainer.appendChild(div);
  
    }
  } */
  const data=[
    {
        /* "id": "1", */
        username: "John",
        password: "Pass1111"
    },
    {
        // "id": "2",
        username: "Mary",
        password: "Pass2222"
    },
    {
        // "id": "3",
        username: "George",
        password: "Pass3333"
    },
    {
        // "id": "4",
        username: "Harry",
        password: "Pass4444"
    },
    {
        // "id": "5",
        username: "Tommy",
        password: "Pass5555"
    }

]

// const data= [
//   {
//     "id": "1",
//     username: "John",
//     password: "Pass1111"
// },
// {
//   "id": "2",
//   username: "Andy",
//   password: "Pass2222"
// }
// ]
      


  // let users=[]
  const loginForm = document.forms.namedItem("login");

  // console.log(data.username)


  loginForm.addEventListener("submit", (e) => {
  e.preventDefault();
  console.log("form found")
  userlogin();
})

  
    


function userlogin(){
  let username = document.getElementById("username").value
  let password = document.getElementById("pwd").value
   
   
  //  let user = {
      
  //   username: username,
  //   password: password,

  // } 
  for (let i = 0; i < data.length; i++) {
    
   
    if (data[i].username === username && data[i].password === password) 
    {
      alert("good"); 
      break;
    } 
    else {
      alert("not this!!!!") 
    }
  }

  
  // console.log(username)
  // users.push(username)
  // users.push(password)
  // console.log("user registered!!!")
  // alert("User Created....")
}



/* function validate()
{
if (data.username == login )
    {
        
        alert('login succesfully');
        return false;

    }
else
  { 
      alert("login failed")
  }
}

function validateUser() {
  if (data.username === login) {
    alert("login successful")
  } else {
    alert("login unsuccessful")
  }
} */
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JSON Test</title>
</head>
<body>
    <div id="myData"></div>
    <!-- <script>
        fetch('people.json')
            .then(function (response) {
                return response.json();
            })
            .then(function (data) {
                appendData(data);
            })
            .catch(function (err) {
                console.log('error: ' + err);
            });
        function appendData(data) {
            var mainContainer = document.getElementById("myData");
            for (var i = 0; i < data.length; i++) {
                var div = document.createElement("div");
                div.innerHTML = 'Name: ' + data[i].username + ' ' + data[i].password;
                mainContainer.appendChild(div);
            }
        }
    </script> -->
    <form action="data" name="login" >
        <!-- <div class="field"> -->
           <input type="text" placeholder="username" name="" id="username">
          <!-- </div> -->
        <!-- <div class="field"> -->
           <input type="password" placeholder="Password" name="" id="pwd">
        <!-- </div> -->
        <div class="pass-link">
           <a href="#">Forgot password?</a>
        </div>
        <div class="field btn">
           <div class="btn-layer"></div>
           <input type="submit" value="Login">
        </div>
    </form>
        <script src="fetchjson.js"></script>
</body>
</html>
  • 2 Contributors
  • 1 Reply
  • 24 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Dani
Member Avatar for Dani

If you look at this block here:

for (let i = 0; i < data.length; i++) {


    if (data[i].username === username && data[i].password === password) 
    {
      alert("good"); 
      break;
    } 
    else {
      alert("not this!!!!") 
    }
  }

Is that the code block you are referring to?

You can see that we are running that if-else block for each data item. However, we only break out of the for loop if we reached a match. Therefore, it will keep showing "not this!" until you hit the match. For example, suppose you enter username George and Pass3333. It will first try John, and say "not this!". Then it will try Mary, and say "not this!". Then it will try George and say "correct" and then break out of the loop and stop trying more usernames.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.