jQuery JSON returning undefined

Question

I have data from my php json in this form:

string(170) "[{"id":"3","Name":"Kontrahent#322","NIP":"753","Adress":"Wiosenna29","PostCode":"20-201","City":"Olkusz","Phone":"12312312","Email":"[email protected]","Value":"0"}]"

and my function:

function showUser(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else { 
         var val = $('#test').val()       
         var id = $('#clientsname option').filter(function() {
            return this.value == val;
        }).data('id');
        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
        } else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
                var data = xmlhttp.responseText;
                alert(data[0].Name);

            }
        }
        xmlhttp.open("GET","getclients/"+id);
        xmlhttp.send();
    }
}

alert(data[0].Name); or alert(data.Name); returning undefined. console.log(data); return:

string(141) "[{"id":"1","Name":"Kontrahent #1","NIP":"735256985","Adress":"","PostCode":"","City":"","Phone":"777555888","Email":"[email protected]","Value":"0"}]"

I don't know what is wrong with my script. Anyone can hellp me?

Isn't xmlhttp.responseText; a string?! The property name suggests it ;) — A. Wolff
– A. Wolff, Commented May 23, 2015 at 13:58
Instead of using the stupid alert for debugging purposes, start using your browsers development console. That is much more powerful. Start by logging data itself: console.log(data); That way you can see what is contained (here undecoded json text) and thus find the solution yourself ;-) — arkascha
– arkascha, Commented May 23, 2015 at 13:59

dfsq · Accepted Answer · 2015-05-23 14:04:00Z

2

You need to parse response as JSON with JSON.parse method, because xmlhttp.responseText is just a string:

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
        var data = JSON.parse(xmlhttp.responseText);
        alert(data[0].Name);
    }
}

Demo: http://plnkr.co/edit/LygRQEu89LnQXW6TWDMa?p=preview

edited May 23, 2015 at 14:04

answered May 23, 2015 at 13:58

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

5 Comments

Kubol Over a year ago

Uncaught SyntaxError: Unexpected token s any time is unexpected token a or s, and I am sure that there is nowhere such a character.

vinayakj Over a year ago

thats s in string(170).. from your json.. yo need valid json string to return

dfsq Over a year ago

@Kubol Make sure you output valid JSON string. Open getclients/3 in separate tab and check that output is

[{"id":"3","Name":"Kontrahent#322","NIP":"753","Adress":"Wiosenna29","PostCode":"20-201","City":"Olkusz","Phone":"12312312","Email":"[email protected]","Value":"0"}]

.

Kubol Over a year ago

Thanks, now it works great I changed little my JSON from getclients/3

vinayakj Over a year ago

what did you change 'little' ?

Drakes · Accepted Answer · 2015-05-23 14:15:01Z

2

xmlhttp.responseText returns text. If you want to parse the JSON, use JSON.parse(xmlhttp.responseText). Thus

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        document.getElementById("txtHint").innerHTML = xmlhttp.responseText;

        // var data = xmlhttp.responseText;
        var data = JSON.parse(xmlhttp.responseText);
        alert(data[0].Name);
    }
}

Uncaught SyntaxError: Unexpected token s

Next,

string(170) "[{"id":"3","Name":"Kontrahent#322","NIP":"753","Adress":"Wiosenna29","PostCode":"20-201","City":"Olkusz","Phone":"12312312","Email":"[email protected]","Value":"0"}]"

is not JSON. This looks like print_r from PHP. Use echo instead if you have a valid JSON string, say by using json_encode() in PHP. Valid JSON will look like this:

[{"id":"3","Name":"Kontrahent#322","NIP":"753","Adress":"Wiosenna29","PostCode":"20-201","City":"Olkusz","Phone":"12312312","Email":"[email protected]","Value":"0"}]

edited May 23, 2015 at 14:15

answered May 23, 2015 at 13:58

Drakes

23.8k3 gold badges58 silver badges97 bronze badges

6 Comments

Kubol Over a year ago

on my PHP I have "return json_encode($data->result());"

Drakes Over a year ago

that looks good, but don't you mean echo json_encode($data->result());? If this is the return from a function, make sure later it is echo'd, not print_r'd

Drakes Over a year ago

How did you change your PHP if you accepted the other answer?

Kubol Over a year ago

I can't accept 2 answers, but i changed var_dump($data) to echo $data; and now it's work "Make sure you output valid JSON string. Open getclients/3 in separate tab and check that output is" this give me idea

Drakes Over a year ago

Ok, but I clearly said "This looks like print_r from PHP. Use echo instead" early on, just for the record - the two output the same thing for a string. That was the killer problem.

|

KTAnj · Accepted Answer · 2015-05-23 14:07:21Z

1

Your json data is not correct.

$result = array("id"=>"3","Name"=>"Kontrahent#322","NIP"=>"753","Adress"=>"Wiosenna29","PostCode"=>"20-201","City"=>"Olkusz","Phone"=>"12312312","Email"=>"[email protected]","Value"=>"0");

return json_encode($result);

Retrieve json data from JSON.parse method

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
        var data = JSON.parse(xmlhttp.responseText);
        alert(data[0].Name);
    }
}

answered May 23, 2015 at 14:07

KTAnj

1,3561 gold badge15 silver badges36 bronze badges

Collectives™ on Stack Overflow

jQuery JSON returning undefined

3 Answers 3

5 Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related