Handle json response (from PHP and mysql) in angularjs

Question

Facing trouble in hadling the Json response from php. I am using AngularJs to display the recieved Json data. I am new to angular and tried a simple exercise for starters. Kindly help. Thanks in advance.

index.html

<!DOCTYPE HTML>

<html ng-app="app">
<head>
   <title>PHP MySQL API Consumed with AngularJS</title>
</head>

<body>
     <div ng-controller="GetUsers">

    <table border="1">
       <thead><tr><th>ID</th><th>Name</th><th>City</th></tr></thead>
       <tbody>
          <tr ng-repeat="user in users"><td>{{user.user_id}}</td><td>  {{user.first_name }}</td><td>{{user.user_city}}</td></tr>
       </tbody>
       </tfoot></tfoot>
    </table>
</div>
 <script>

    var app = angular.module('app', []);

    app.controller('GetUsers', function ($scope,$http){
        $http.get('http://localhost/angmysql/api.php').success(function(data) {
            $scope.users = data;
        });
      }
   });

  </script>

<script src="angular.js"></script>

<body>
</html>

api.php

<?php

    $db_name  = 'dbtuts';
    $hostname = 'localhost';
    $username = 'root';
    $password = '';

    $dbc = mysqli_connect('localhost','root','','dbtuts') or die('Error connecting to database');

    $sql = mysqli_query($dbc,"SELECT * FROM users");

    $emparray = array();

    while($row =mysqli_fetch_assoc($sql))
    {
        $emparray[] = $row;
    }

    echo json_encode($emparray);

    mysqli_close($dbc);
?>

What is the trouble ? What contains the data variable in your success function on the http promise ? — Eria
– Eria, Commented Jan 8, 2016 at 12:53
you can make this like $http.get('http://localhost/angmysql/api.php').then(function (response){ console.log(response)}) to see you response how looks like and your users in response.data — Abdelrahman M. Allam
– Abdelrahman M. Allam, Commented Jan 8, 2016 at 13:01

Etse · Accepted Answer · 2016-01-08 13:23:44Z

0

The argument passed into the callback by $http is a object, where the response body is stored in the .data field.

Try this:

$http.get('http://localhost/angmysql/api.php').success(function(response) {
    $scope.users = response.data;
});

From AngularDocs

The response object has these properties:

data – {string|Object} – The response body transformed with the transform functions.
status – {number} – HTTP status code of the response.
headers – {function([headerName])} – Header getter function.
config – {Object} – The configuration object that was used to generate the request.
statusText – {string} – HTTP status text of the response.

edited Jan 8, 2016 at 13:23

answered Jan 8, 2016 at 12:59

Etse

1,2451 gold badge15 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Etse Over a year ago

In that case I think the returned result is not what you think. Try to log it to console. console.log(response.data) what do you get? Need more information, otherwise this is just be guessing.

Collectives™ on Stack Overflow

Handle json response (from PHP and mysql) in angularjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related