How can I encode a cURL response to be a JSON object?

Question

I'm trying to POST to a PHP controller using jQuery Ajax. I then want my controller to retrieve data from an API and return the data to my AJAX function.

Here is my javascript:

$(function() {

    $.ajax({
        type: 'POST',
        url: '/mycontroller/myaction/',
        success: function(data) {       
            console.log(data);
        }
    });

});

Here is my action in my controller:

public function myaction() {

    $ch = curl_init();

    $endPoint = 'https://endpointfortheapi.com';

    curl_setopt($ch, CURLOPT_URL, $endPoint); 
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
    curl_setopt($ch, CURLOPT_HTTPHEADER, array(
        'Content-type: application/json; charset=utf-8'
    ));

    $response = curl_exec($ch);

    $response = json_encode($response);

    echo $response;

    curl_close($ch);
}

This seems to work, however, when I use json_encode() the array is returned as an escaped string, not a json object. When I console.log(data) in my AJAX request, I see a string like this:

"[{\"firstProperty\":\"firstValue\",\"secondProperty\":\"secondValue\"}]"

How can I encode the response array to be an actual JSON object?

Answer 1

So you're doing this:

$response = curl_exec($ch);    
$response = json_encode($response);

Unclear what the returned data is from https://endpointfortheapi.com , but it seems to me that you are taking a source JSON response & then double-encoding the response when you do json_encode again.

If you send a plain string to json_encode instead of an object or array—it will just escape it exactly as you are seeing. So I would just remove or comment out that line & see if that clears things up.

Also, you should be setting proper JSON headers in your PHP before the echo. So based on what I mention above & the headers I would refactor your PHP code to be like this:

public function myaction() {

    $ch = curl_init();

    $endPoint = 'https://endpointfortheapi.com';

    curl_setopt($ch, CURLOPT_URL, $endPoint); 
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);

    $response = curl_exec($ch);
    // $response = json_encode($response);

    // header('X-JSON: (' . $response. ')');
    header('Content-type: application/json');
    echo $response;

    curl_close($ch);

}

I commented out the X-JSON header since there is some controversy surrounding the use of that custom header which is used by some applications to automatically evaluate JSON data if they are using the Prototype JavaScript framework . Not worth the hassle if you are not using Prototype and don't care about such things.

Answer 2

Set the dataType to json in your ajax request:

$(function() {

$.ajax({
    type: 'POST',
    url: '/mycontroller/myaction/',
    dataType: 'json',
    success: function(data) {       
        console.log(data);
    }
});

});