Javascript Looping through JSON an array of object s

Question

so i have a login form , and i want to check whether the entered name and password already exists in the JSON object , it will prompt a different message for both cases but thr problem is it's not doing it right , here's the code for more clarity :

     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;
   }

and here's the JSON Object for a quick test

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

the problem is when the user enters the username and the password which exists in the JSON object id does alert "Welcome back!" , but also the "welcome here new" , which i don't want to , since the latest alert is for new user which their credentials doesn't exist in the JSON object.

Where would you be using this? Why aren't you doing this on a server? — Luca Kiebel
– Luca Kiebel, Commented Apr 19, 2018 at 9:32
Simplest fix - Instead of break in the first loop, use return. — gurvinder372
– gurvinder372, Commented Apr 19, 2018 at 9:33
i'm actually building a small quizz application to apply things i've learnt about js , so i'm running this on localhost and playing around with the basic stuff ! — Zakaria Sichaib
– Zakaria Sichaib, Commented Apr 19, 2018 at 9:34
@Luca, I believe they are doing it on a server, that is what the XMLHttpRequest object is about. — Bjonnfesk
– Bjonnfesk, Commented Apr 19, 2018 at 9:35

gurvinder372 · Accepted Answer · 2018-04-19 09:38:23Z

1

Simplest fix would be not allows second for-loop to be executed, if a match is found, so

Either set a flag if match is found and don't execute second for-loop if that flag is set.
Return instead of break from first for-loop.

But, you can make your code less verbose by using Array.prototype.some to check if any value matches

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

hasMatch returns true if the match is found

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

edited Apr 19, 2018 at 9:38

answered Apr 19, 2018 at 9:36

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Zakaria Sichaib Over a year ago

Array.prototype.some is a new feature in ES6? no?

gurvinder372 Over a year ago

No some is there since es5, but arrow functions are from es6

Zakaria Sichaib Over a year ago

so you mean that a return statement means that any loop after the actual loop won't be executed in the code?

gurvinder372 Over a year ago

@ZakariaSichaib Yes, after return no other statement in that function is executed.

Zakaria Sichaib Over a year ago

one more question , what's the key thing to actually learn and understand the language? typically " keep building things"?

|

Collectives™ on Stack Overflow

Javascript Looping through JSON an array of object s

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related