Ad

Array Won't Load When You First Click On The Link Angularjs?

- 1 answer

// SETTING UP SERVICES

app.service("PictureService", function($http) {
  var Service = {};
  Service.pictureLinkList = [];

  // GETTING PICTURE LINKS FOR PAGE

$http.get("data/img_location.json")
 .success(function(data) {
  Service.pictureLinkList = data;
})
.error(function(data,status) {
  alert("Things went wront!");
});

Service.findImgById = function(id) {
  for(var item in Service.pictureLinkList) {
    if(parseInt(Service.pictureLinkList[item].id) === parseInt(id)) {
    return Service.pictureLinkList[item];
  }
 }
}

return Service;
});

// COMMENT SERVICE START*****************************************
app.service("CommentService", function($http) {
  var comService = {};
  comService.commentList = [];

// GETTING COMMENTS FROM JSON FILE

$http.get("data/comments.json")
  .success(function(response){
      comService.commentList = response;

      for(var item in comService.commentList){
        comService.commentList[item].date = new Date(comService.commentList[item].date).toString();
      }
  })
  .error(function(data,status){
      alert("Things went wrong!");
  });

comService.findCommentById = function(id) {
  var comArr = [];
  for(var item in comService.commentList) {
    if(parseInt(comService.commentList[item].imgId) === parseInt(id)) {
    comArr.push(comService.commentList[item]);
  }
}
return comArr;
};

return comService;
});


// Controller
app.controller("pictureDetails", ["$scope", "PictureService", "CommentService", "$routeParams",  function($scope, PictureService, CommentService, $routeParams) {
$scope.imgById = PictureService.findImgById($routeParams.id);
$scope.commentsById = CommentService.findCommentById($routeParams.id);
}]);

Here is the HTML:

<ul>
   <li ng-repeat="item in commentsById">
    <div class="panel panel-primary text-center"><h3>Posted by: {{    item.postedBy }} at </h3><p>{{ item.date }}</p></div>
    <div class="panel-body text-center">{{ item.comment }}</div>
  </li>

Comments.json file:

 [
 {"id": 1, "imgId": 1, "comment": "Pretty good sketching there pal!", "date": "October 1, 2014 11:13:00", "postedBy": "John"},
 {"id": 2, "imgId": 1, "comment": "Nice one keep working on your skills", "date": "January 17, 2016 11:48:00", "postedBy": "John"}
]

First of all, I have just started using Angularjs and really like it as a framework. The problem is when I load the html page $http service reads the json file and returns objects which gets assigned to an array. Then i use ng-repeat to go through the array and read values.

When i load the page first time the array is empty, i click on a link and go back then the array and the page gets loaded. why is that?

If I am not clear with my question please let me know. Any help is greatly appreciated.

Ad

Answer

$scope.$watch( function(){ return CommentService.commentList; }, function(comments) {
for(var item in comments) {
  if(parseInt(comments[item].imgId) === parseInt($routeParams.id)) {
    $scope.commentsById.push(comments[item]);
  }
}
console.log($scope.commentsById);
});
$scope.commentsById = [];

adding this piece to the controller worked, was reading a book on Angularjs and they explained it like $watch variables watches any given array and assigns it to anything.

If need more explanation let me know. It works perfectly now, i click on it once and the comments are loaded. Loads the whole comment array in one attempt.

Ad
source: stackoverflow.com
Ad