Json login with multiple user login in a single login page
<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>