CODEWITHSUNDEEP
javascriptphpangularjsjson
jhon dano
jhon dano

Reputation: 658

Angular loading data from server json

Can someone tell me whats the best solution to use jsonObjects in ng repeat? My code is as follows:

My PHP response is this:

die(json_encode(array('sts'=>'success', 'title'=>'*****', 'msg'=>'*******', 'data'=>$result)));

My angular.js the service is like this:

LeadApp.service('LeadsService', function ($http) {
  var AllLeads = {
    async: function() {
        var promise = $http({
            url: '../app/ServerData.php',
            method: "POST",
            params: { req_id: 'leads' }
        }).then(function (response) {
        return response.data;
      });
      return promise;
    }
  };
  return AllLeads;
});

Then in my controller i call the service and set a lead var to use in my view with ng repeat: My Data is being loaded i assured already. I attached a pic of the console log from below. But somehow the ng repeat just wont work like expected... What am i doing wrong? There is no error!

    ....
        LeadsService.async().then(function (d) {
                this.leads = d.data;
                console.log(this.leads);
       this.list_all = this.leads;

Here is the main ng repeat part in the view (custom ng repeat with "dir-paginate"): ...

<div class="widget-content leads_list" ng-controller="leadsController as leads">
<tr dir-paginate="lead in leads.list_all | orderBy:sortKey:reverse | filter:search | itemsPerPage:15" pagination-id="leads.list_all">
    <td scope="row">{{lead.id}}</td>

...

Upvotes: 0

Views: 52

Answers (2)

georgeawg
georgeawg

Reputation: 48968

You need to bind the this context outside then method.

Since you are using ng-controller="leadsController as leads", it would be wise to bind to the variable leads.

var leads = this;
LeadsService.async().then(function (d) {
        leads.list_all = d.data;
        console.log(leads.list_all);
});

The this context inside the then method is not the same as the this context outside the then method. Also binding to the same name that you use in your template helps to avoid confusion.

Upvotes: 1

Bata
Bata

Reputation: 651

this is not the controller in that callback function context. So you need to assign this to a variable in the controller.

 var ctrl = this;

 LeadsService.async().then(function (d) {
        ctrl.leads = d.data;
        console.log(ctrl.leads);

Upvotes: 1

Related Questions