Display json data formed from PHP in table using angularjs

Question

Im fetching data from mysql db and putting it in json format.

fetch.php file:

echo $json; outputs the below to the console.

[{"id":"1","emp_no":"1111","first_name":"1fname","last_name":"1lname","dept_name":"1dept"},{"id":"2","emp_no":"2222","first_name":"2fname","last_name":"2lname","dept_name":"2dept"},{"id":"3","emp_no":"3333","first_name":"3fname","last_name":"3lname","dept_name":"3dept"},{"id":"4","emp_no":"4444","first_name":"4fname","last_name":"4lname","dept_name":"4dept"},{"id":"5","emp_no":"5555","first_name":"5fname","last_name":"5lname","dept_name":"5dept"},{"id":"6","emp_no":"6666","first_name":"6fname","last_name":"6lname","dept_name":"6dept"},{"id":"7","emp_no":"7777","first_name":"7fname","last_name":"7lname","dept_name":"7dept"},{"id":"8","emp_no":"8888","first_name":"8fname","last_name":"8lname","dept_name":"8dept"},{"id":"9","emp_no":"9999","first_name":"9fname","last_name":"9lname","dept_name":"9dept"}]

My controller looks like this:

.controller('fetchController', function ($scope, $http) {
$http.get("fetch.php")
    .success(function (data) {
        $scope.user = data;
        console.log($scope.user);
    });

$scope.user = data.data; Some suggested this but I get an undefined when I console.log($scope.user);

When $scope.user = data; console.log($scope.user); shows the same json output as above.

I then want to put this into my html table:

<table>
<tr>
    <th>ID</th>
    <th>Number</th>
    <th>First</th>
    <th>Last</th>
    <th>Depart</th>
</tr>
<tr ng-repeat="x in user track by $index">
    <td>{{x.id}}</td>
    <td>{{x.emp_no}}</td>
    <td>{{x.first_name}}</td>
    <td>{{x.last_name}}</td>
    <td>{{x.dept_name}}</td>
</tr>

But im getting no data returned to my page... Data is returned when I hardcode some json data but not when reading from the PHP query. Any ideas why?

.controller('fetchController', function ($scope, $http) {
    $http.get("fetch.php")
        .success(function (data) {
            $scope.user = [{
                "id": "1",
                "emp_no": "1111",
                "first_name": "1fname",
                "last_name": "1lname",
                "dept_name": "1dept"
            }, {
                "id": "2",
                "emp_no": "2222",
                "first_name": "2fname",
                "last_name": "2lname",
                "dept_name": "2dept"
            }];
            console.log($scope.user);
        });

Returns:

Edit: Ive added more detail to the post so hopefully someone can see where the problem lies.

Answer 1

The problem is your "connected to db" output. You must remove that line from your PHP file and the rest should work as expected.

echo $json looked good because it is valid json, but since you had previously output text in your PHP script, the JSON decoding in Angular is breaking. If you look at the output you posted from the console, you see the "connected to db" text prefixing the JSON that you want in your application. That text prefix forces the output from PHP to be invalid.