Not getting JSON array back from Ajax call

Question

I know this has been asked before but I've reviewed all the previous posts I can find and still cannot get this to work. Hopefully the problem is simple and you guys can help me solve it.

I am not able to get an array, which I have json_encoded, from the PHP script back into a Javascript array. If I remove the condition that dataType should be json then the success function complains about unexpected data.

I have a Javascript function which calls a PHP script with POST method. In the PHP script I write some debugging messages to a log file and to display the content of the json_encoded array. When I check that using JSONLint the content is JSON compliant but my javascript function always goes to error.

The PHP function looks like:

<?php

// Include the php logger class so that we can write log messages to a log file
require_once('/myscripts/phplogger.php');

// Set up php log file
$log = new Logging();
$log->lfile('/mylogfiles/php-debug.log');

// Log status
$log->lwrite('Starting debug');
// ...
// (there's some more stuff here to get the data from a MySQL database)
// ...

// The following line when read in the log file shows a valid JSON array
$log->lwrite('array '.json_encode($dataVnvMethods));

$json_dataVnvMethods = json_encode($dataVnvMethods);

$log->lwrite('Ending debug');

?>

The Javascript function looks like:

function jsgetvnvfilters(projid,repid,weekid)
{
    $.ajax(
            {
            url: './getvnvfilter.php',
            data: {'projid':projid, 'weekid':weekid, 'repid':repid},
            type: 'post',
            dataType: 'json',
            success: function()
              {
                    alert('success');
                    var prevnvlist = '<?php echo $json_dataVnvMethods ?>';
                    var vnvlist = JSON.parse(prevnvlist);
                    for (var x = 1; x <= vnvlist.length; x++) {
                            var vnv = vnvlist[x]['VnVMethod'];
                            vnvSel.options[vnvSel.options.length] = new Option(vnv, vnv);
                    }
              },
            error: function()
              {
                    alert('failure');
              }

            }
    );

}

Answer 1

You misunderstand how the javascript and php are related; the php will be rendered only once on page-load so you cannot echo the returned php data in your javascript success handler.

Instead, everything that is outputted by your php script will be available in a javascript variable:

success: function(vnvlist) {
           //     ^^^^^^^ this is what has been outputted by php, the
           //             json already parsed

           // your data is available in `vnvlist`
           // var prevnvlist = '<?php echo $json_dataVnvMethods ?>';

           // with dataType='json' you don't need to parse anything
           // as jQuery will parse it for you
           // var vnvlist = JSON.parse(prevnvlist);

           // so all you need is this...
           alert('success');
           for (var x = 1; x <= vnvlist.length; x++) {
             var vnv = vnvlist[x]['VnVMethod'];
             vnvSel.options[vnvSel.options.length] = new Option(vnv, vnv);
           }
         },

And you need to make sure that php outputs only your json string:

...
// The following line when read in the log file shows a valid JSON array
$log->lwrite('array '.json_encode($dataVnvMethods));

// output your data so that it is available on the client-side
echo json_encode($dataVnvMethods);

$log->lwrite('Ending debug');
...