Angular loading data from server json

Question

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>

...

Where is your ng-repeat code? Can you post the ng-repeat part? — user1846747
– user1846747, Commented Mar 11, 2016 at 19:26

georgeawg · Accepted Answer · 2016-03-11 19:50:00Z

1

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.

edited Mar 11, 2016 at 19:50

answered Mar 11, 2016 at 19:31

georgeawg

49k13 gold badges78 silver badges98 bronze badges

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

Comments

Bata · Accepted Answer · 2016-03-11 19:34:15Z

1

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);

edited Mar 11, 2016 at 19:34

answered Mar 11, 2016 at 19:28

Bata

6513 silver badges7 bronze badges

Collectives™ on Stack Overflow

Angular loading data from server json

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related