JQuery read from Json file

Question

This is my code, here I am passing input username and password values. I have written function that input will be checked with json file. If the given input exists "login correct" alert will be displayed else "login incorrect" will be displayed.

but here for me always "login incorrect" is displayed. I do know what wrong in this function. I have tried by using array variable in the function to hold the json file data. then it work correctly. I am having trouble in checking with json file.

help me solve this problem. My input should be checked with json file it exists or not.

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js">
</script>
<script>
$(document).ready(function() 
{
    var a="user2";
    var b="password2";
    var checkval = false;

    $.getJSON('login.json', function(data) 
    {
        $.each(data,function(i,obj)
        {
            if(obj.username == a && obj.password == b)
            {
                checkval = true; 
                return false;
            }
        });
    });
    if(checkval == true)
        {
            alert("login correct");
        }
    else
        {
            alert("!!!!!-----Incorrect login Details-----!!!!!");
        }

});
</script>
</head>
<body>
</body>
</html>

and this is my login.json file

[
    {
            "username": "user1",
            "password": "password1"
    },
    {
        "username":"user2",
        "password" : "password2"
    }
]

Checking passwords in Javascript like this is a __REALLY__ bad idea. Anyone with modest Javascript skills will be able to hack into your system. You should be doing login on the server side, not in Javascript. — Matt Browne, Mar 06 '13 at 05:37
Not related to the answer. Why `if(checkval == true)` just use `if(checkval)` — asifsid88, Mar 06 '13 at 05:37
put alert(obj.username); and check whether you have got values or not — NaveenKumar1410, Mar 06 '13 at 05:37
@MattB. i am a newbie to JQuery. just learning its techniques. sure i will remember your suggestion. thanks. — MAHI, Mar 06 '13 at 05:39

score 1 · Accepted Answer · edited May 23 '17 at 12:27

ajax is async before the passwords and usernames are matched your code

 if(checkval == true)
        {
            alert("login correct");
        }
    else
        {
            alert("!!!!!-----Incorrect login Details-----!!!!!");
        }

is executed,try

$.getJSON('login.json', function(data) 
    {
        $.each(data,function(i,obj)
        {
            if(obj.username == a && obj.password == b)
            {
                checkval = true; 
                return false;
            }
        });
         if(checkval == true)
        {
            alert("login correct");
        }
    else
        {
            alert("!!!!!-----Incorrect login Details-----!!!!!");
        }

    });

here is a small proof of concept that when ajax is not used it works http://jsfiddle.net/aKVC2/

and here is the working DEMO

P.S.

as suggested by some answers setting async:false is one option(never avail it!!!), but since jQuery version 1.8 its DEPRECATED

score 1 · Answer 2 · edited May 23 '17 at 10:25

1

$.getJSON is async.. meaning it makes the call while the rest of your code runs. It is getting to if(checkval == true) before the call is made and before it can check against the values returned.

If you want to "fix" this, see this question.

Is it possible to set async:false to $.getJSON call

edited May 23 '17 at 10:25

Community

1
1

answered Mar 06 '13 at 05:38

Andrew McGivery

1,350
8
20

But he has written the validation of username and password in the callback method. Which will execute after the file is loaded. Correct me if I'm wrong – asifsid88 Mar 06 '13 at 05:40
@asifsid88 the validation is inside the callback but the check he is implementing on a variable that is updated inside the callback function is outside it... – Dakait Mar 06 '13 at 05:43
But the callback method doesn't get called until the request has been sent and a response is received. In the meantime, since it is async, the code moves on to the if statement before the callback has a chance to be called. – Andrew McGivery Mar 06 '13 at 05:44

score 1 · Answer 3 · answered Mar 06 '13 at 05:40

Put the second if inside:

$.getJSON('login.json', function(data) {
    $.each(data,function(i,obj){
        if(obj.username == a && obj.password == b){
            checkval = true; 
            return false;
        }
    });
    if(checkval == true){
        alert("login correct");
    }else{
        alert("!!!!!-----Incorrect login Details-----!!!!!");
    }
});

score 1 · Answer 4 · answered Mar 06 '13 at 05:42

1

ajax is asynchronous ,Your function making call before it can check against the returned value

add below line just above the $.getJson

$.ajaxSetup({async:false});

answered Mar 06 '13 at 05:42

EnterJQ

1,014
8
18

1

its deprecated since jquery 1.8 http://stackoverflow.com/questions/11448011/jquery-ajax-async-deprecated-what-now – Dakait Mar 06 '13 at 05:48

JQuery read from Json file

4 Answers4