Can not bind data on view using angular.js and PHP

Question

i need to display data on the page using Angular.js. First i fetched all data from DB using PHP .Here no data is displaying on the page.I am getting the below retrieved data in my browser console.

all data [{"0":"1","id":"1","1":"","name":"","2":"","pass":"","3":"","email":""},{"0":"2","id":"2","1":"subhra","name":"subhra","2":"12345","pass":"12345","3":"[email protected]","email":"[email protected]"},{"0":"3","id":"3","1":"rakesh","name":"rakesh","2":"0901209474","pass":"0901209474","3":"maini","email":"maini"},{"0":"4","id":"4","1":"raj","name":"raj","2":"23457","pass":"23457","3":"rai","email":"rai"},{"0":"5","id":"5","1":"Rahul","name":"Rahul","2":"098765","pass":"098765","3":"shinha","email":"shinha"}]

I am explaining my code below.

read.js:

var app=angular.module('Read_data',[]);
app.controller('readController',function($scope){
    $.ajax({
        type:'GET',
        url:"php/read.php",
        success: function(data){
            $scope.data=data;
            console.log('all data',$scope.data);
        }
    })
});

read.php:

<?php
//database settings
$connect = mysqli_connect("localhost", "root", "*******", "AngularTest");
$result = mysqli_query($connect, "select * from users");
$data = array();
while ($row = mysqli_fetch_array($result)) {
  $data[] = $row;
}
    print json_encode($data);
?>

index.html:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="Read_data">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo of Angular.js</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/angularjs.js" type="text/javascript"></script>
<script src="js/read.js" type="text/javascript"></script>
</head>

<body>
<center ng-controller="readController">

<div id="body">
 <div id="content">
    <table align="center">
    <tr>
    <th colspan="5"><a href="add_data.html">add data here.</a></th>
    </tr>
    <th> Name</th>
    <th> Email</th>
    <th> Password</th>
    <th colspan="2">Operations</th>
    </tr>
        <tr ng-repeat="users in data">
        <td>{{users.name}}</td>
        <td>{{users.email}}</td>
        <td>{{users.pass}}</td>
  <td align="center"><a href="edit_data.php?edt_id={{users.id}}"><img src="images/pencil_small.png" align="EDIT" /></a></td>
        <td align="center"><a href="javascript:delete_id('')"><img src="images/cross-small-icon.png" align="DELETE" /></a></td>
        </tr>
    </table>
    </div>
</div>

</center>
</body>
</html>

Please help me to resolve this issue and bind all data in table successfully.

where did you use data-ng-app="Read_data"

Happy Coding
– Happy Coding

2015-09-25 09:26:34 +00:00
Commented Sep 25, 2015 at 9:26 — Happy Coding
– Happy Coding, Commented Sep 25, 2015 at 9:26
@raveenanigam: check my updated code.

satya
– satya

2015-09-25 09:28:52 +00:00
Commented Sep 25, 2015 at 9:28 — satya
– satya, Commented Sep 25, 2015 at 9:28

Rene Korss · Accepted Answer · 2015-09-25 09:43:50Z

2

Angular is not aware of updated data. Use $scope.$apply if you are not using $http for AJAX.

var app=angular.module('Read_data',[]);
app.controller('readController',function($scope){
    $.ajax({
        type:'GET',
        url:"php/read.php",
        success: function(data){
            $scope.$apply(function(){
                $scope.data = angular.fromJson(data);
            });
            console.log('all data',$scope.data);
        }
    })
});

or use $http (recommended)

var app=angular.module('Read_data',[]);
app.controller('readController',function($scope, $http){
    $http.get('php/read.php').
        then(function(data) {
            // this callback will be called asynchronously
            // when the response is available
            $scope.data = data.data;
        }, function(response) {
            // called asynchronously if an error occurs
            // or server returns response with an error status.
        });
});

edited Sep 25, 2015 at 9:43

answered Sep 25, 2015 at 9:28

Rene Korss

5,4943 gold badges33 silver badges39 bronze badges

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

4 Comments

satya Over a year ago

Here my problem is i can not display data on the page.

Rene Korss Over a year ago

Can you explain more, what is the problem? Why can't you display it on page?

satya Over a year ago

@ Rene : I am getting the value like this

all data [{"id":"2","name":"subhra","pass":"12345","email":"[email protected]"},{"id":"3","name":"rakesh","pass":"0901209474","email":"maini"},{"id":"4","name":"raj","pass":"23457","email":"rai"},{"id":"5","name":"Rahul","pass":"098765","email":"shinha"}]

in console but not able to display.Please check my html page.

Rene Korss Over a year ago

Updated my answer. You need to use angular.fromJson() to create object from JSON. Tested, works. With $http you don't have to do this.

Collectives™ on Stack Overflow

Can not bind data on view using angular.js and PHP

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related