Passing an array as parameter to PHP Restful Api with AngularJS

Question

In my local environment I'm using the PHP7 and I developed a Restful API to an AngularJS application. I need do a get request to the Api and pass an array as parameter, so I did it:

$http.get("/Api/MyUrl.php", {
    params: {
        "Names[]": ["Foo", "Bar"]
    }
})
.then(function(response){ //fires in success
    console.log(response.data);
}, function(response){ //fires in error
    console.log(response.statusText);         
});

In MyUrl.php file I printed the parameters in the screen like this:

<?php
   print_r($_GET);
?>

When it was executed, exactly what I imagined was printed on the browser console:

Array
(
    [Names] => Array
        (
            [0] => Foo
            [1] => Bar
        )

)

Until here there's no problem. But, when I uploaded the application in the server, that supports only the 5.6 PHP version (I don't know if it's correlated, but I think so), the parameter with the array is gotten by the PHP in another way, and what is printed on console is that:

Array
(
    [Names%5B%5D] => Bar
)

It "undestands" the [] signals as its HTML codes (%5B and %5D), get only the last element of the array and interprets as a commom variable.

What I need to do to read the parameters in the server in the same way that I do in the local environment?

score 2 · Answer 1 · edited May 23 '17 at 10:29

Good question. I suggest you checkout this old issue in angularjs project where it reads:

There is no particular standard for how arrays should be serialized into query strings. Different back ends expect different formats. This current method (in 1.1.x) was chosen specifically because it allows the developer the most flexibility.

The way you are passing params to $http.get() seems to work for php7.0 because php7.0 may be smart enough to infer that brackets are being passed. But the fact is that the query string in your angular code is not properly URI-encoded so it fails against your server.

Interestingly, a similar issue has been reported here the answer to which references documentation from jQuery which has the same behavior:

Because there is no universally agreed-upon specification for param strings, it is not possible to encode complex data structures using this method in a manner that works ideally across all languages supporting such input. Use JSON format as an alternative for encoding complex data instead.

What is the solution?

For a start, you can try URI-encoding your params.

Another solution would be to pass your query as json encoded data:

$http.get("/Api/MyUrl.php", {
    params: {
        "data": JSON.stringify({'names': {'Foo', 'Bar'}})
    }
})

and json_decode($_GET['data']) to access your parameters in backend.

And lastly, you can take advantage of AngularJS's paramSerializer to define your own serializer and pass your params as you used to. In this particular case, paramSerializerJQLike will be useful:

$http.get("/Api/MyUrl.php", {
    params: {
        "Names[]": ["Foo", "Bar"]
    }
    paramSerializer: '$httpParamSerializerJQLike'
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    }
})

Passing an array as parameter to PHP Restful Api with AngularJS

1 Answers1