Angular: Get last 3 elements of json object

Question

I have a page that list an item and let users add comments to it.

1. On that page I would like to display the last 3 comments added. Any tips on how to do get the last 3 comments from JSON objects?
2. Also when adding a new comment how can I increment the comment number (hardcoded for now)?

See my code: http://plnkr.co/edit/iOBXuQVY40LD8d8QV5ss?p=preview

Thanks

Answer 1

Look at the limitTo Filter. You can specific from the end of a list by using negative.

You could do

message in item.comments|limitTo:-3

Also for your comments, you should haven't them as a object dictionary, rather just use an array like so:

"comments":
        [
          {
            "id": "comment1",
            "name":"user1",
            "description": "This is comment 1"
          },
          {
            "id": "comment2",
            "name":"Jane D.",
            "description": "This is comment 2"
          },
          {
            "id": "comment3",
            "name":"Jone D.",
            "description": "This is comment 3"
          },
          {
            "id": "comment4",
            "name":"Test",
            "description": "This is comment 4"
          },
          {
            "id": "comment5",
            "name":"user",
            "description": "This is comment 5"
          }
        ]

If they aren't already in order you may need to add a date field of sort and sort them after you pull them in.

Here is a update plunker to help you out. Note your ng-repeat was also in the wrong place

Answer 2

There are a couple things to note:

I changed the comments to be an array in the json. For some reason you had it as an object.

You can use the limitTo filter to limit to the last three. <li ng-repeat="message in item.comments | limitTo:-3"></li>

My answer includes the total and functioning add comment.

Controller code :

myApp.controller('ItemController', function($scope, $route, $location, $http, Items){

  Items.get(function(response){
    $scope.items = response; 

  })

  $scope.$watch('items', function() {
     $scope.total = $scope.items[0].comments.length;
  });

  $scope.addMessage = function(mess) {
    $scope.items[0].comments.push(
      {
        "name":"user1",
        "description": "This is comment " + ($scope.total + 1) 
      }
    );
  }

})

Updated Plunkr: http://plnkr.co/edit/2oWLRU06Kdp0yKqjodmv?p=preview

Answer 3

Expanding on other answers: You should look at adding an ID or date to each comment. For my example solution, I've used "ID".

In my forked plunk, I've added a total, and a 'show more' button for an expandable comment list. The size is controlled by the variable 'limit'.

Also, the variable 'itemID' inside $scope.addMessage() is adding the ID to each comment. This will solve part 2 of your question.

Plunker: http://plnkr.co/edit/bAtXmCls2gk8p5WAHsrM?p=preview

$scope.addMessage (adds item, description has the value of whatever you put in the input box and resets limit back to latest 3)

  $scope.addMessage = function(mess) {
    var itemID = $scope.items[0].comments.length + 1;
    $scope.items[0].comments.push(
          {
            "id": itemID,
            "name":"user" + itemID,
            "description": mess
          }
      );
    $scope.totalItems = itemID;
    $scope.limit = 3;
  }

$scope.showMore (increases limit by 3)

  $scope.showMore = function() {
    $scope.limit += 3;
  }

JSON: I've changed it a little. 'comments' is now an array, and an 'id' is added

    "comments":
    [
      {
        "id": 1,
        "name":"user1",
        "description": "This is comment 1"
      },
      {
        "id": 2,
        "name":"Jane D.",
        "description": "This is comment 2"
      },
      ...
    ]