CODEWITHSUNDEEP
javascriptphpangularjs
Malik Perang
Malik Perang

Reputation: 400

Ng-repeat doesn't show data

I am very new to AngularJS and currently on learning PHP RESTful service with angularjs.I had a problem that why was my response data doesn't show in ng-repeat ?

this is code structure:

<html ng-app="ngTest">
    <head>

    <title>Angular Test</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script type="text/javascript" src="https://code.angularjs.org/1.0.7/angular-resource.js"></script>
    </head>
    <body>
        <div ng-controller="GetCtrl">
        <ul>
            <li ng-repeat="user in users">{{ user.email }}</li>
        </ul>
    </div>
        <script type="text/javascript">
        var ngTest = angular.module('ngTest',[]);

        ngTest.factory('GetFactory',function($http){
                var users = [];
                var factory = {};

                factory.getUsers = function(){
                    $http.get('api/get.php');
                    return users;
                };
                return factory;
            });



        ngTest.controller('GetCtrl',function($scope,GetFactory){
                    $scope.users = GetFactory.getUsers();

        });


        </script>

    </body>
    </html>

PHP code contain dummy basic json response data :

<?php 
$dummyData = array(
    'email'=>'[email protected]',
    'password'=>'admin321',
    );
$jsonen = json_encode($dummyData);
print_r($jsonen);

?>

What is wrong here?

Update: Please scroll to @Koddi answer. Thanks.

Upvotes: 1

Views: 647

Answers (3)

koddi
koddi

Reputation: 75

Here is my edited answer. Please check inline comments for explanations.

<title>Angular Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.0.7/angular-resource.js"></script>
</head>
<body>
    <div ng-controller="GetCtrl">
    <ul>
        <li ng-repeat="user in users">{{ user.email }}</li>
    </ul>
</div>
    <script type="text/javascript">
        var ngTest = angular.module('ngTest',[]);

        ngTest.factory('GetFactory',function($http)
        {
                var users = [];
                var factory = {};

                factory.getUsers = function(){
                    // the problem was here.
                    // as @Michael Butler pointed out.    
                    // Next, Best practices is to return the $http.get
                    // so you can play with promises callbacks 
                    // in the caller controller (as GetCtrl).
                    // promise callbacks : success() & .error
                    var userGetRequest = $http.get('api/get.php');
                    return userGetRequest;
                };
                return factory;
        });

        ngTest.controller('GetCtrl',function($scope,GetFactory)
        {
                    $scope.users = [];

                    GetFactory.getUsers()
                    .success(function(response)
                    {
                        // the api request was OK.
                        // we push because get by default return an object
                        // and here users is an array.
                        $scope.users.push(response);
                        console.log(response); // check navigator console for the server response
                    })
                    .error(function(response)
                    {
                        // something went wrong with the api request
                        console.log(response); // check navigator console for the server response
                    });
        });
    </script>
</body>
</html>

You may note that var users inside the factory is useless for now 'cause we're returning directly the promise as result of the call. But if you want to feed it with the get result, create a getSuccess function inside the factory like following:

var getSuccess = function(response) 
{
  // we push because get by default return an object
  // and here users is an array.
  users.push(response);    
}

And inside the factory.getUsers:

var userGetRequest = $http.get('api/get.php');
userGetRequest.success(getSuccess);
return userGetRequest;

Hope that helps.

Upvotes: 1

Michael Butler
Michael Butler

Reputation: 6309

Don't use print_r, use print instead to print out the data. print_r adds additional formatting that won't be valid JSON.

Update:

This part doesn't look right:

$http.get('api/get.php');
return users;

I'm not too familiar with AngularJS yet, but don't you need to assign something to the users variable? It looks like you are just calling the get.php AJAX request without storing the result anywhere.

Upvotes: 0

Shankar Narayana Damodaran
Shankar Narayana Damodaran

Reputation: 68476

There is no $data variable defined.

It should be

$jsonen = json_encode($dummyData);

instead of

$jsonen = json_encode($data);

Upvotes: 2

Related Questions