AngularJS - $http GET response is always [object Object] - php

Question

I am just trying to fetch an array of key value pairs from PHP and send the response back to AngularJS $http GET request:
PHP Code get_projects.php file:
<?php
header('Content-Type: application/json');
$data = [{"id" => 1, "name" => 'Audi'}, {"id" => 2, "name" => 'BMW'}, {"id" => 3, "name" => 'Honda'}];
$encode = json_encode($data);
echo $encode;
?>
AngularJS Controller code:
app.controller('MainController', ['$scope', '$http', function ($scope, $http) {
$scope.name = 'Search';
$scope.projects = '';
$http({
method: 'GET',
url: 'includes/get_projects.php',
params: {}
}).then(function success(response) {
$scope.projects = response.data;
alert($scope.projects);
});
}]);
The alert($scope.projects); always returns [object Object]. The echo gettype($encode); prints string but the alert statement prints [object Object]. I have tried angular.fromJson() but still it prints [object Object].
I am really confused with the concept of json_encode() function in PHP. Please help me fix the problem.

Answer 1

You converted the PHP array to a string by serializing it using JSON. $encode therefore is a string, which is fine.
Your frontend now gets the response and (since it came with the content type of application/json) already deserialized it for you from a JSON string to a JavaScript object.
Attempting to convert an object to a string will give you something like [object Object]. alert isn't the right tool here since it can work with a string only.
Try console.log instead and check your devtools console output, there you'll see an explorable object. (Even better: In your devtools debugger, set a breakpoint in the success handler and inspect the object at that point.)
Bottom line: It's all working fine, you just didn't use the right method to look at your object.

Answer 2

#CherryDT I think i fixed the problem.
var make = [];
for (var key in response.data) {
if(response.data.hasOwnProperty(key)){
make.push({
"id": response.data[key].id,
"name": response.data[key].name
});
}
}
$scope.projects = JSON.stringify(make);
$scope.projects = angular.fromJson($scope.projects);
PHP send the array as string with json_encode.
AngularJS response.data takes the response as Object.
Loop through the response.data object and push the key/values to variable make.
Create a string with JSON.stringify.
Convert the JSON string to Object using angular.fromJson.
I have viewed couple of blogs which assign the response.data object directly to $scope variable but in my case it did not work.
AngularJS version i am using is : AngularJS v1.2.8