title: Json login with multiple user login in a single login page
body: <p>I am trying to do a login form by using JSON, I have 3 different users to login in a single login page, they are as 1. User 2. Admin 3. Supplier 
  This is <a href="https://jsfiddle.net/9cdnzLLz/" rel="nofollow">my code</a>. I am doing this as a test case, I will change the authentication details to server side later on. </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt; Login Form&lt;/title&gt;
  &lt;script&gt;
       function validate()
      {
          var username = document.getElementById("username").value;
          var password = document.getElementById("password").value;
          var loginlist = { "User": {
                                  "userlist":[{"username":"usr1", "password":"a123"},{"username":"usr2", "password":"a123"},{"username":"usr3", "password":"a123"}],
                                  "ID":1
                              },  
                              "Admin": {
                                      "adminlist":[{"username":"admin1", "password":"b123"},{"username":"admin2", "password":"b123"},{"username":"admin3", "password":"b123"}],
                                      "ID":2
                              },  
                              "Supplier": {
                                      "supplierlist":[{"username":"sup1", "password":"c123"},{"username":"sup2", "password":"c123"},{"username":"sup3", "password":"c123"}],
                                      "ID":1
                              }   
          };
          var logged = false;
          if(loginlist[0].User.ID === 1){
              for(var i =0; i &lt; loginlist[0].User.userlist.length; i++){
                  if(username == loginlist[0].User.userlist[i].username &amp;&amp; password == loginlist[0].User.userlist[i].password){
                      logged= true;
                  }
              }
              if(logged)
              alert("User login");
  
              else
              alert("User login fail");               
  
          }
          else if(loginlist[0].Admin.ID === 2){
              for(var j =0; j &lt; loginlist[0].Admin.adminlist.length; j++){
                  if(username == loginlist[0].Admin.adminlist[j].username &amp;&amp; password == loginlist[0].Admin.adminlist[j].password){
                      logged= true;
                  }
              }
              if(logged)
              alert("Admin login");
  
              else
              alert("admin login fail");
  
          }
          else{
              for(var k =0; k &lt; loginlist[0].Supplier.supplierlist.length; k++){
                  if(username == loginlist[0].Supplier.supplierlist[k].username &amp;&amp; password == loginlist[0].Supplier.supplierlist[k].password){
                      logged= true;
                  }
              }
              if(logged)
              alert("Supplier login");
  
              else
              alert("supplier login fail");
  
          }
      }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="container"&gt;
  &lt;div class="main"&gt;
  &lt;h2&gt;Login Form&lt;/h2&gt;
  &lt;form id="form_id" method="post" name="myform"&gt;
  &lt;label&gt;User Name :&lt;/label&gt;
  &lt;input type="text" placeholder="Enter username" name="username" id="username"/&gt;
  &lt;label&gt;Password :&lt;/label&gt;
  &lt;input type="password" placeholder="Enter Password" name="password" id="password"/&gt;
  &lt;input type="button" value="Login" id="submit" onclick="validate()"/&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>which I have tried. My issue is when I enter something into the username and password nothing is displaying, I have done this kind of program but with the single user operation. I am not able to achieve this multiple users in a single login page</p>