JQuery AJAX retrieving an Array of Objects

Question

I am trying to use json_encode so that my jquery ajax function can retrieve data from my php script however the array I am attempting to encode and retrieve is an array of objects

$la_uselessinfo = array();
$lv_cnt = 0;

$uselessinfo = pg_execute($gv_dbconn, "uselessinfo_cur", array());
while($la_row = pg_fetch_row($uselessinfo)) {

    $la_uselessinfo[$lv_cnt]["uinf_idno"] = $la_row[0];
    $la_uselessinfo[$lv_cnt]["uinf_desc"] = $la_row[1];
    $lv_cnt = $lv_cnt + 1;

}

echo json_encode($la_uselessinfo);

I am trying to retrieve this using the jquery ajax function

$.ajax({
    url     : 'scripts/phpfunctions.php',
    type    : 'GET',
    data    : {'action':'sel_uselessinfo'},
    success : function(data) {
                  //console.log(data);
                  console.log(data["uinf_desc"][0]);
              },
    error   : function(log) {
                  console.log(log.message);
              }
});

I am getting the following error

Uncaught TypeError: Cannot read property '0' of undefined

I can't tell if it's going wrong in the php code or the jquery code, what is the correct way to retrieve an array of objects?

Answer 1

$.ajax({
    url     : 'scripts/phpfunctions.php',
    type    : 'GET',
    data    : {'action':'sel_uselessinfo'},
    dataType: "json",
    success : function(data) {
                  console.log(data[0]["uinf_desc"]);
                  console.log(data[0]["uinf_desc"]);
              },

It should be data[0]["uinf_desc"] as written in your PHP

Answer 2

Change your PHP to:

$la_uselessinfo = array();
$lv_cnt = 0;

$uselessinfo = pg_execute($gv_dbconn, "uselessinfo_cur", array());
while($la_row = pg_fetch_row($uselessinfo)) {

    $la_uselessinfo[$lv_cnt]["uinf_idno"] = $la_row[0];
    $la_uselessinfo[$lv_cnt]["uinf_desc"] = $la_row[1];
    $lv_cnt = $lv_cnt + 1;

}

echo json_encode($la_uselessinfo); //$la_uselessinfo is already an array, no need to wrap it again, and doing so causes you to misjudge the depth of your array 

Then change your jQuery to :

$.ajax({
    url     : 'scripts/phpfunctions.php',
    type    : 'GET',
    data    : {'action':'sel_uselessinfo'},
    success : function(data) {
                  //console.log(data);
                  console.log(data[0]["uinf_desc"]); // this line changed
              },
    error   : function(log) {
                  console.log(log.message);
              }
});

To loop over your results do this:

  // sample data var data = [{ "uinf_idno": "1", "uinf_desc": "website db " }, { "uinf_idno": "2", "uinf_desc": "local apache " }] $.each(data,function(i,e){ var uinf_idno = e.uinf_idno; var uinf_desc = e.uinf_desc; $('#result').append('uinf_idno= '+uinf_idno+' and uinf_desc= '+uinf_desc+' <br>'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="result"></div>