how to return database result through angular method

Question

I want to know if its possible to return database result through angular method call within an ngRepeat template. To clarify here is my template:

<div class="article-right" ng-repeat="localNews in allLocalNews | limitTo:5">
  <div class="article-title">
    <p>
      On {{localNews.dte | date}} 
      <a>Number of comment: {{getNumberOfComment(localNews.id)}} </a>
    </p>
  </div>

and here is my controller, Within my controller I have a method which accepts each id value of results in ngRepeat to fetch the number of comments from the database

$scope.getNumberOfComment = function(id){ 
  var cObj = {id:id};   //get a news number of comments   
  return $http.post("shared/search/getNumberOfComment.cln.php",cObj).success(function(response){
        if(response != "failed"){
            return response;
        }
    }).error(function (response, status) {
        console.log(response);
    });
}

This scripts makes my browser to freeze as it goes into loop. Any help will be highly appreciated.

If I understand correctly, you are trying to get collection of news, then for every item of news you want to get number of comments in template? Why? You should do it in your controller, or better - prepare endpoint to get required information by one request, instead of sending every time a get request. — tommybernaciak
– tommybernaciak, Commented Aug 24, 2017 at 16:26
And one more thing, why are you using $http.post for get request? — tommybernaciak
– tommybernaciak, Commented Aug 24, 2017 at 16:28
Can you please explain a little bit of what you mean by "do it in your controller" with code snippet @tommybernaciak — Alex Imenwo
– Alex Imenwo, Commented Aug 25, 2017 at 9:53
Sorry, should have explained it better. I mean get data in the controller, for example by calling get method on initialization, then display response using ng-repeat in a template. Do not call get in ng-repeat. The first advantage is that you will get all data you want using just one API call, if you have 100 news you will end up with 100 unnecessary API calls which may make your application very slow. Second, http requests are asynchronous calls, this may give you strange results with using it in the template. — tommybernaciak
– tommybernaciak, Commented Aug 25, 2017 at 10:10

Jaie · Accepted Answer · 2017-08-25 04:57:07Z

1

It probably loops because each digest cycle it will remake the calls to get the info. You better off having a variable that gets populated per item and calling something like ng-init on each element which will only get called once to initialise you item variable. Does that make sense?

eg

    <div class="article-right" ng-repeat="localNews in allLocalNews | limitTo:5">
      <div class="article-title">
        <p>
          On {{localNews.dte | date}} 
          <a ng-init=getNumberOfComment(localNews.id, localNews)>Number of comment: {{localNews.myVar}} </a>
        </p>
      </div>

  $scope.getNumberOfComment = function(id, localNews){ 
  var cObj = {id:id};   //get a news number of comments   
  return $http.post("shared/search/getNumberOfComment.cln.php",cObj).success(function(response){
        if(response === "passed"){
            localNews.myVar = response;
        }
    }).error(function (response, status) {
        console.log(response);
    });
}

answered Aug 25, 2017 at 4:57

Jaie

1371 silver badge9 bronze badges

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

1 Comment

Alex Imenwo Over a year ago

Sure the general idea you explained does makes sense to me @Jaie and i tried to modify accordingly, but browser is still running into the loop. is there any other way to achieve some results?

tommybernaciak · Accepted Answer · 2017-08-25 10:21:55Z

0

The solution is simple, use get call on controller init to get all comments data. Then using ng-repeat iterate on this collection and show only those data you want for a proper news id. If you want only a number of comments, here is the example, it is not tested but you should get the idea. It requires from you to prepare API endpoint to return all the comments.

function CommentsController() {
  var vm = this;
  vm.comments = [];
  getComments();

  function getComments() {
    $http.get("your/api/getComments.cln.php").success(function(r){
      vm.comments = r;
    }
  }

  function getNumberOfComment(newsId) {
    return vm.comments.filter(function(comment){
      return comment.news_id === newsId;
    }).length;
  }
}


<div class="article-right" ng-repeat="localNews in allLocalNews | limitTo:5">
  <div class="article-title">
    <p>
     On {{localNews.dte | date}} 
    <a>Number of comment: {{$ctrl.getNumberOfComment(localNews.id)}} </a>
  </p>
</div>

answered Aug 25, 2017 at 10:21

tommybernaciak

3902 silver badges19 bronze badges

1 Comment

Alex Imenwo Over a year ago

Many thanks @tommybernaciak I have been able to figure it out through your script.

Collectives™ on Stack Overflow

how to return database result through angular method

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related