Parse Error JSON.Parse when using getJSON

Question

It's my 1st time coding with JS & JSON & I've a error message when I used getJSON :

parsererror

SyntaxError: JSON.parse: unexpected character at line 2 column 1 of the JSON data

return window.JSON.parse( data );

Here my code :

$.getJSON("../processeur.php",{
    idProg: idp,
    exercice: exo,
    ajax: "true"})
    .done(
    function(response)
    {
    // alert( "success" );

        var options ="";
        if(response != null)
        {
            var length = response.data.length;
            for(var i=0; i<length; i++)
            {
                options +="<option value = '"+response.data[i]+"'>"+response.data[i];"</option>";
            }
        }


        $("#Liberation tbody").append
        (
            "<tr>"+            
                "<td align='center'><input class='liberationL' name='liberationL' type='text'/></td>"+
                "<td align='center'><input class='serviceL' name='serviceL' type='text'/></td>"+
                //liste déroulante des codes projets destinataires
                "<td align='center'>"+"<select class='codest' name ='codest' id=listecodes >"+"<option>Aucun</option>"+options+"</select>"+"</td>"+
//                "<td align='center'><input class='dateL' name='dateL' type='text'/><span><br>jj-mm-AAAA</span></td>"+
        "<td align='center'><input type='text' class='dateL' id='DateF' name='dateL' onclick='javascript:onCalendar_click();'/></td>"+
                "<td align='center'><input class='montantL' name='montantL' type='text'/></td>"+           
                //liste déroulante des types de mouvements            
                "<td align='center'>"+"<select class='mouvementL' name='mouvementL'>"+"<option value='lc'>LC(-)</option>"+"<option value='vc'>VC(+)</option>"+"<option value='ci'>CI</option>"+"</select>"+"</td>"+
                "<td align='center'>"+
                "<img src='../images/enregistrer.png' class='btnEnregistrerLiberation'"+"style='cursor: pointer;'/>"+' '+"<img src='../images/supprimer.png' class='btnSuppLiberation'"+"style='cursor: pointer;'/>"+"</td>"+
            "</tr>");
            $(".btnEnregistrerLiberation").bind("click",EnregistrerLiberation); 
            $(".btnSuppLiberation").bind("click",SupprimerLib);

    })
    .fail(function(jqxhr, textStatus, err){
        alert( "error : " + textStatus );
        console.log( textStatus, err );
    });

Here my php code :

include './BD/T_mouvements.php';
include '../sql.php';
require './jsonwrapper/jsonwrapper.php';

$idProg = $_GET['idProg']; 
$exercice = $_GET['exercice'];

$array = array();
$liste = selectionnerListePro($exercice, $idProg);
//$liste = selectionnerListePro(2011, 4);

foreach ($liste as $item) 
{     
    $array[] = array($item);  
}
echo "{\"data\":". json_encode($array) . "}";
exit();

And here the result of my php code when parameters are choose manually for function which runs query (for exemple 2011 & 4) :

{"data":[["DEV-SID"],["ENTREPOTDUI"],["HYDROGEOL"],["MES-TEMPS"],["MET-ENTREPO"],["MIG-BO\/XI"],["SID-AMODG"],["SID-ARCHID"],["SID-DSI"],["SID-FNGE"],["SID-OT-POL"],["SID-PILOTAG"],["SID-USAGRH"],["SIG-3D"],["SIG-ALTERNA"],["SIG-BDTOPO"],["SIG-CAO-DAO"],["SIG-DON-PDI"],["SIG-DONNEES"],["SIG-ORTHO"],["SIG-PLATGEO"],["SIG-STRUCTU"],["SIG-TOURNEE"],["SIG-WEB-PDI"],["STAT-CREDOC"]]}

I don't understand where is my bug..

Answer 1

The json_encode() function will do everything for you. Just create the data structure you want as an array or an object and the leave json_encode() to do all the hard work.

So change echo "{\\"data\\":". json_encode($array) . "}"; echo "{\\"data\\":". json_encode($array) . "}"; to

echo json_encode( array('data'=>$array) );

I am also fairly sure you can remove some unnecessary code from your script. You seem to be getting an array of arrays back from selectionnerListePro() and then processing that array of arrays into another array of arrays, but making no modifications in the process.

So this

$liste = selectionnerListePro($exercice, $idProg);
//$liste = selectionnerListePro(2011, 4);

foreach ($liste as $item) 
{     
    $array[] = array($item);  
}
echo json_encode( array('data'=>$array) );

Could be reduced to

$liste = selectionnerListePro($exercice, $idProg);
echo json_encode( array('data'=>$liste) );

Answer 2

I tried to do this with AJAX, & it finally works !! Here my code :

$.ajax(
    {
        type: "GET",
    url: "../processeur.php",
    dataType: "json",
        data: dataString,
    success: function(response)
        {
          //alert("success");

            var options ="";

            if(response != null)
            {

                for(var i=0; i<response.data.length; i++)
                {
                    options +="<option value = '"+response.data[i]+"'>"+response.data[i];"</option>";
                }
            }


            $("#Liberation tbody").append
            (
                "<tr>"+            
                    "<td align='center'><input class='liberationL' name='liberationL' type='text'/></td>"+
                    "<td align='center'><input class='serviceL' name='serviceL' type='text'/></td>"+
                    //liste déroulante des codes projets destinataires
                    "<td align='center'>"+"<select class='codest' name ='codest' id=listecodes >"+"<option>Aucun</option>"+options+"</select>"+"</td>"+
    //                "<td align='center'><input class='dateL' name='dateL' type='text'/><span><br>jj-mm-AAAA</span></td>"+
            "<td align='center'><input type='text' class='dateL' id='DateF' name='dateL' onclick='javascript:onCalendar_click();'/></td>"+
                    "<td align='center'><input class='montantL' name='montantL' type='text'/></td>"+           
                    //liste déroulante des types de mouvements            
                    "<td align='center'>"+"<select class='mouvementL' name='mouvementL'>"+"<option value='lc'>LC(-)</option>"+"<option value='vc'>VC(+)</option>"+"<option value='ci'>CI</option>"+"</select>"+"</td>"+
                    "<td align='center'>"+
                    "<img src='../images/enregistrer.png' class='btnEnregistrerLiberation'"+"style='cursor: pointer;'/>"+' '+"<img src='../images/supprimer.png' class='btnSuppLiberation'"+"style='cursor: pointer;'/>"+"</td>"+
                "</tr>");
                $(".btnEnregistrerLiberation").bind("click",EnregistrerLiberation); 
                $(".btnSuppLiberation").bind("click",SupprimerLib);
        },
        error: function(jqxhr, textStatus, err){
        alert( "error : " + textStatus );
        console.log( textStatus, err );
        }
    });