Kubol
Kubol

Reputation: 136

jQuery JSON returning undefined

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?

Upvotes: 1

Views: 483

Answers (3)

Drakes
Drakes

Reputation: 23660

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"}]

Upvotes: 2

KTAnj
KTAnj

Reputation: 1356

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

Upvotes: 1

dfsq
dfsq

Reputation: 193261

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

Upvotes: 2

Related Questions