如何在Angular Promise请求中获取结果数据？

Question

I am studying Angular and I have a problem with my code. I am trying to create an ajax request by using promise and service. My output in ajax access in successful but I can't display it in the view.

Here's some of my code:

<div ng-app="promiseCall">      
    <div ng-controller="promiseCtrl">       
        <button tyle="button" class="btn btn-default" ng-click="promiseCallRequest()">Promise Call</button>     
        <table class="table table-bordered table-hovered">
            <thead>
                <tr>
                    <td class="text-center"><label>ID</label></td>
                    <td class="text-center"><label>TITLE</label></td>
                    <td class="text-center"><label>BODY</label></td>
                    <td class="text-center"><label>CREATED AT</label></td>
                    <td class="text-center"><label>UPDATED AT</label></td>
                </tr>
            </thead>
            <tbody>
                <!-- no output -->
                <tr ng-repeat="item in noteListing">
                    <td>{{ item.id }}</td>
                    <td>{{ item.title }}</td>
                    <td>{{ item.body }}</td>
                    <td>{{ item.created_at }}</td>
                    <td>{{ item.updated_at }}</td>
                </tr>
            </tbody>        
        </table>    
    </div>    
</div>


angular.module('promiseCall',[])
.controller('promiseCtrl', function($scope, $log, noteData) {       
    $scope.promiseCallRequest = function() {            
        var getPromiseCallData = noteData.getNoteData();            
        getPromiseCallData.then({
            function(payload) {                 
                console.log(payload); //no output :(                    
                //$scope.noteListing = payload.data;
            },
            function(errorPayload) {
                $log.error('Failure request in note', errorPayload);
            }
        });             
    }       
}).factory('noteData', function($http, $log, $q) {
    return {
        getNoteData: function() {               
            var deferred = $q.defer();              
            $http.get("<?php echo site_url('tutorial/getAjaxData'); ?>")
            .success(function(data){                    
                /*
                deferred.resolve({
                    id: data.id,
                    title: data.title
                });
                */                  
                //console.log('success'); -- ok                 
            })
            .error(function(msg, code){
                deferred.reject(msg);
                $log.error(msg, code);
                alert('there must be an error!');
            });             
            return deferred.promise;                
        }
    }
});

Here's the JSON output:

{"article_data":[{"id":"1","title":"sample updated 1","body":"sample 1","created_at":"2015-06-15 15:37
:28","updated_at":"2015-06-15 21:38:46"},{"id":"2","title":"sample 2","body":"sample 2","created_at"
:"2015-06-15 15:37:54","updated_at":"2015-06-15 15:37:54"}]}

Answer 1

Try to remove the {} in your getPromiseCallData.then({}); .

Eg

$scope.promiseCallRequest = function() {
    var getPromiseCallData = noteData.getNoteData();

    getPromiseCallData.then(
            function(payload) {

                console.log(payload); //no output :(

                //$scope.noteListing = payload.data;
            },
            function(errorPayload) {
                $log.error('Failure request in note', errorPayload);
            }
    );
};

Hope it helps.

Answer 2

try the below code:

....
getPromiseCallData.then(function(payload) {                 
        console.log(payload); //no output :(                    
        //$scope.noteListing = payload.data;
    }).catch(function(errorPayload) {
        $log.error('Failure request in note', errorPayload);
    });         

...
getNoteData: function() {                       
    return $http.get("<?php echo site_url('tutorial/getAjaxData'); ?>");   
    }

in getNoteData , what you did was a promise anti-pattern, you already have a promise, no need to create another wrapper for it.

Edit:

if you want to log the service's success and error, you could simply do, you still don't need an additional promise:

getNoteData: function() {                       
    return $http.get("<?php echo site_url('tutorial/getAjaxData'); ?>").then(function(data){
        //some log
        return data;
    }, function(err){
        // log err
        return err;
    });   
}