CODEWITHSUNDEEP
javascriptangularjsmeteorangular-meteor
Johhan Santana
Johhan Santana

Reputation: 2425

Angular ng-repeat not showing data from Meteor.call

I'm trying to get data to a view in an ng-repeat.

Here's the controller

class dashboardFaqsCtrl {
  constructor($scope, $reactive) {
    'ngInject';

    $reactive(this).attach($scope);

    this.faqs = [];

    Meteor.call('getFaqs', function (err, res) {
      if (err) {
        console.log(err);
      } else {
        console.log(res);
        this.faqs = [res.data.faq];
        console.log(this.faqs);
      }
    });

  }
}

Here's the method

import Future from 'fibers/future';

Meteor.methods({
  getFaqs: function( ) {
    // Create our future instance.
    var future = new Future();

    HTTP.get( 'http://example.com/faq', {}, function( error, response ) {
      if ( error ) {
        future.return( error );
      } else {
        future.return( response );
      }
    });

    return future.wait();
  }
});

The view:

<table id="datatable" class="table table-striped table-bordered">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>


  <tbody>
    <tr ng-repeat="item in dashboardFaqs.faqs">
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
  </tbody>
</table>

The view doesn't repeat the ng-repeat.

How can I make angulars ng-repeat update or show the data returned from this HTTP call from the server side?

Thanks!

ANSWER

Was able to figure it out thanks to the comments and answers, here's what I changed:

class dashboardFaqsCtrl {
  constructor($scope, $reactive) {
    'ngInject';

    $reactive(this).attach($scope);

    this.faqs = [];

    Meteor.call('getFaqs', function (err, res) {
      if (err) {
        console.log(err);
      } else {
        console.log(res);
        this.faqs = res.data.faq;
        $scope.dashboardFaqs.faqs = this.faqs;
        console.log(this.faqs);
        $scope.$apply();
      }
    });

  }
}

Upvotes: 0

Views: 89

Answers (1)

Rodrigo Garcia
Rodrigo Garcia

Reputation: 58

You have to pass data in $scope

class dashboardFaqsCtrl {
  constructor($scope, $reactive) {
    'ngInject';

    $reactive(this).attach($scope);

    this.faqs = [];

    Meteor.call('getFaqs', function (err, res) {
      if (err) {
        console.log(err);
      } else {
        console.log(res);

        this.faqs = [res.data.faq];
        $scope.dashboardFaqs = this.faqs;
        console.log(this.faqs);
      }
    });

  }
}

Try It!!!

Upvotes: 1

Related Questions