How to make jquery objects of array from php response of ajax call

Question

Here is my javascript variable my , i wanted to get it from php file.

Inside the selectAnnotation.php i am just echoing it

echo "{
    src : 'http://192.168.1.58/annotate/drive/image/test.jpg',
    text : 'Suresh and Gopinath....',
    shapes : [{
        type : 'rect',
        geometry : { x : 0.1825726141078838, y: 0.23756906077348067, width : 0.11602209944751381, height: 0.11618257261410789 }
    }]
}";
exit;

As, i wanted to get it from php file. To achieve it I made a ajax call

    var my = {
    src : 'http://192.168.1.58/annotate/drive/image/<?php echo $_GET['file']?>',
    text : 'Suresh and Gopinath....',
    shapes : [{
        type : 'rect',
        geometry : { x : 0.1825726141078838, y: 0.23756906077348067, width : 0.11602209944751381, height: 0.11618257261410789 }
    }]
}
console.log(my);
console.log('__________');
    $.post("masterCall/selectAnnotation.php",
        { url: 'http://192.168.1.58/annotate/drive/image/<?php echo $_GET['file']?>'
        },
        function(data,status){
        console.log(data);
        console.log('__________');
        //anno.addAnnotation(data);
        });

While doing this, I can see the difference in console..

Here is the screen of what happens i do console log of console.log(my) and console.log(data)

So, how can i make the proper response which appears like inside the console.log(my)

Note :

The var my is the proper format that i need, I wanted to get the same format posted from php file and get it in jquery.

Update :

When i try to do

$v = "{
    src : 'http://192.168.1.58/annotate/drive/image/test.jpg',
    text : 'Suresh and Gopinath....',
    shapes : [{
        type : 'rect',
        geometry : { x : 0.1825726141078838, y: 0.23756906077348067, width : 0.11602209944751381, height: 0.11618257261410789 }
    }]
}";
echo json_encode($v);

and in jquery

function(data,status){
        var obj = jQuery.parseJSON( data);
        console.log(obj);
        });

i am getting almost same like previous one..

Answer 1

try to use json_encode and json_decode to transfer your data. In js JSON.parse

Answer 2

Try constructing like this:

$Result = $Connection->query($Query); 
$result=array(); 
$i=0; 
while($row = $Result->fetch_assoc()){ 
$result[$i]['src']=$row['src']; 
$result[$i]['text']=$row['text']; 

$result[$i]['shapes'][]=array('type'=>'rect','geometry'=>array('x' => $row['x'], 'y'=> $row['y'], 'width' => $row['width'], 'height'=>$row['height']) ); 
$i++; 
} 
echo json_encode($result);

//javascript response after success...

data=JSON.parse(data); 
for(var i=0;i<data.length;i++){ 
console.log(data[i]); 
}

Answer 3

Its my first answer on SO.

I guess the correct way to do it would be to use eval(). However it is rather recommended to use json_encode and json_decode as Ninjava has suggested.