Unable to access json data retrieved from php page using jquery $.ajax

Question

How to access this json data in JavaScript. when I alert it the result is undefined

Here is jQuery code

$.ajax({
    type: "POST",
    url: "frmMktHelpGridd.php",
    data: {
        labNo: secondElement
    },
    dataType: "json",
    beforeSend: function () {
        // Do something before sending request to server
    },
    error: function (jqXHR, textStatus, errorThrown) {
        alert('error has occured');
        alert(errorThrown);
    },
    success: function (data) {

        //Here is the problem

        alert(data[0]['Result']);
    }
});

This is PHP code

            $data=array($no);
    for($i=0;($i<$no && ($row=mysql_fetch_array($result)));$i++)
    {
        $data[$i]=array();
        $data[$i]['Result']         =   $row['Result'];         
        $data[$i]['TestCode']       =   $row['TestCode'];           
        $data[$i]['TestStatus']     =   $row['TestStatus'];         
        $data[$i]['SrNo']           =   $row['SrNo'];               
    }

    $data1=json_encode($data);

    echo $data1;
      exit;

I have tested the PHP file independently, The json data is output as follows:

      [{"Result":"1","TestCode":"22","TestStatus":"0","SrNo":"1"},{"Result":"1","TestCode":"23","TestStatus":"1","SrNo":"2"}]

side note: use console.log instead of alert thanks!

zamnuts
– zamnuts

2013-11-23 10:46:28 +00:00
Commented Nov 23, 2013 at 10:46 — zamnuts
– zamnuts, Commented Nov 23, 2013 at 10:46

Kevin Cittadini · Accepted Answer · 2013-11-23 11:15:37Z

2

$.ajax({
    type: "POST",
    url: "frmMktHelpGridd.php",
    data: {
        labNo: secondElement
    },
    dataType: "json",
    beforeSend: function () {
        // Do something before sending request to server
    },
    error: function (jqXHR, textStatus, errorThrown) {
        alert('error has occured');
        alert(errorThrown);
    },
    success: function (data) {
        //Added parse json
        var data = jQuery.parseJSON(data)

        alert(data[0]['Result']);
    }
});

edited Nov 23, 2013 at 11:15

Kevin Cittadini

1,4791 gold badge22 silver badges30 bronze badges

answered Nov 23, 2013 at 10:49

saloni

1214 bronze badges

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

2 Comments

A.M Over a year ago

same solution has been given before but it gives an error on console

Gene Bo Over a year ago

I tried a bunch of different answers on this site .. none worked; and this finally did the trick - thanks! In my case, I used the jQuery shortcut notation: var data = $.parseJSON(data);

Kevin Cittadini · Accepted Answer · 2013-11-23 11:05:43Z

0

You can access to your data by doing

data[0].Result

It's an Object, not an array.

so data[0]['Result'] it's not the proper way

EDIT: Since you have more objects, you have to do a loop this way:

$.each(data, function(key, val){
    console.log(val.Result);
    console.log(val.TestCode);  
    //...
});

When you see something like

{
    "foo":"bar",
    ...
}

you can access to it the same way as above:

name_of_the_object.foo

that will have the value "bar"

edited Nov 23, 2013 at 11:05

answered Nov 23, 2013 at 10:37

Kevin Cittadini

1,4791 gold badge22 silver badges30 bronze badges

3 Comments

Kevin Cittadini Over a year ago

jsfiddle.net/kevincittadini/WGXh4 - It have to work (check your browser console to see results)

Kevin Cittadini Over a year ago

@sunny I apology I didn't give much attention to your JSON echo. I've seen only one object inside, but you got more so you have to do a loop, i'll update my answer too - This works :) jsfiddle.net/kevincittadini/WGXh4/2

A.M Over a year ago

Correct and thanx for your precious time. Solved My Problem. I can't vote your answer UP because my reputation is under 15 yet(sorry)

Rajnikant Kakadiya · Accepted Answer · 2013-11-23 10:43:38Z

-1

Try to add parse JSON. I have added. Now it may be work.

$.ajax({
    type: "POST",
    url: "frmMktHelpGridd.php",
    data: {
        labNo: secondElement
    },
    dataType: "json",
    beforeSend: function () {
        // Do something before sending request to server
    },
    error: function (jqXHR, textStatus, errorThrown) {
        alert('error has occured');
        alert(errorThrown);
    },
    success: function (data) {
        //Added parse json
        var data = $.parseJSON(data)

        alert(data[0]['Result']);
    }
});

answered Nov 23, 2013 at 10:43

Rajnikant Kakadiya

2,2751 gold badge24 silver badges30 bronze badges

1 Comment

Rajnikant Kakadiya Over a year ago

tested your json object and it shows alert. Please check this jsFiddle: jsfiddle.net/BcvC3

Collectives™ on Stack Overflow

Unable to access json data retrieved from php page using jquery $.ajax

3 Answers 3

2 Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related