How can I display json data return from the controller using angularjs

Question

I want to display the json encode data return from the controller using angularjs to my view.

<div ng-app="memberApp" ng-controller="memberCtrl">
    <input type="text" ng-model="search" />Search
    <table class="table table-bordered">
        <thead>
            <tr>
                <th ng-click="orderByMe('name')">Name</th>
                <th ng-click="orderByMe('country')">Country</th>
            </tr>
        </thead>
            <tr ng-repeat="member in members track by $index | toArray:false | filter:search ">
                <td>{{member.FirstName + " " + member.LastName}}</td>
                <td>{{member.Country}}</td>
            </tr>
        <tbody>
        </tbody>
    </table>
</div>

and in my script I used the $http service. Please help!

angular.module('memberApp', []).controller('memberCtrl', function($scope, $http) {
    $scope.members = [];
    var httpRequest = $http({
        method: 'POST',
        url: '<?php echo site_url('member/getMemberList'); ?>',
        data: {},
        dataType: 'json'
    }).success(function(data){
        $scope.members = data;
    });
});

And the data is something like this

{"members":[{"FirstName":"Matthew","LastName":"dennis","City":"Mississauga","Country":"Canada"}]

`.success(function(data){ $scope.members = JSON.parse(data); });` — random_user_name, Feb 25 '16 at 02:09

score 1 · Accepted Answer · answered Feb 25 '16 at 02:24

1

You want the array that is data.members.

Simplest would be change the php to only return that array without the extra object and property members or in controller change

$scope.members = data;

To

$scope.members = data.members;

answered Feb 25 '16 at 02:24

charlietfl

170,828
13
121
150

Thank you sir! Im very grateful for your help – PHP.Newbie Feb 25 '16 at 02:32

score 0 · Answer 2 · answered Feb 25 '16 at 02:24

I get it. Instead of data it is data.members.

angular.module('memberApp', []).controller('memberCtrl', function($scope, $http) {
    $scope.members = [];
    var httpRequest = $http({
        method: 'POST',
        url: '<?php echo site_url('member/getMemberList'); ?>',
        data: {},
        dataType: 'json'
    }).success(function(data){
         $scope.members = data.members;
    });
});

How can I display json data return from the controller using angularjs

2 Answers2