Call all the versions of a SharePoint comment's field with AngularJS

Question

I created a list with AngularJS, using ng-repeat. The data comes from a SharePoint list. In my SharePoint list when I open to see the detail I can see the version history of the "Comments" field, it looks like this:

But when I open the detail in my Angular list, it only shows the latest message (And only the message, without the name of the person who wrote it and the date). My list looks like this:

So my question is how can I look for the version history and display it with Angular? And if possible with the name of the person and date.

---

Edit:

Thanks to @Marko_Tica I know there is an api to call version history of each item, as it says in this answer. With this I have what I needed: to only show the version history of the "Comment's field". The thing now is that this formula forces me to make a call for each Item, because I need to specify the Item ID in the url:

https://myDomain.com/sites/mySite/_api/web/Lists/getbytitle('MyListName')/items(ITEMID)/versions

My list contains like a thousand items. Also I'm already doing a call to show the List items in a table. When you click an item, a modal shows the detailed info, I need to put the version history of Comments within this modal.
How can I achieve that when you click on a certain item, the Version history of only the selected item is displayed?

Answer 1

Look at this solution and change it to your needs. https://joeldsouzasite.wordpress.com/2015/12/06/display-version-history-through-javascript-list/

Basically you need to call _layouts/15/Versions.aspx

 url:weburl+’_layouts/15/Versions.aspx?list=’ + currentListGUID + ‘&ID=’+item1+’&Source=’+weburl+’/Lists/’+title+’/AllItems.aspx’,

---

Stackoverflow answer here https://stackoverflow.com/questions/24423657/sharepoint-2013-get-splistitem-versions-via-rest

Answer 2

So I've found a way to do this. When I make the call (or request) of the SharePoint list, I just did another one inside the modal's function to call the version history of the selected item.

HTML:
I make an ng-repeat of the elements requested and put an ng-click to open the modal when you click on the item's title

<table>
   <tr>
      <th>ID</td>
      <th>name</th>
   </tr>
   <tr ng-repeat="x in data">
      <td>{{x.ID}}</div>
      <td ng-click="showDetails(x)">{{x.LinkTitle}}</div>
   </tr>
</table>

JS:
A normal http request. And in the Modal's function I make the request for the version history

$http({
   method: "GET",
   url: "https://myDomain.com/sites/mySite/_api/web/lists/getByTitle('MyListName')/items?$select=*,LinkTitle,&$top=10000",
   headers: { "Accept": "application/json; odata=verbose" }
}).then(function onSuccess(response) {
   $scope.data = response.data.d.results;
         
   //Code that opens the modal when a certain item is clicked
   $scope.showDetails = function(x){

      //Request the versions of the clicked item. Notice in the URL I put the ID of current clicked item
      $http({
         method: "GET",
         url: "https://myDomain.com/sites/mySite/_api/web/lists/getbytitle('MyListName')/items(" + x.ID + ")/versions",
         headers: { "Accept": "application/json; odata=verbose" }
      }).then(function onSuccess(response) {
         $scope.versionsData = response.data.d.results;
      });

      $scope.x = x;
      $('#myModal').modal('show');
   }
});

Here is the modal's HTML, I'm using Bootstrap's modal.
I've made a list within a list. In the Comments I put an ng-repeat for the versions, filtering only the ones where the "comments" changed (with ng-if).

<div id="myModal" class="modal fade" role="dialog" tabindex="-1">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
         </div>
         <div class="modal-body">
            <ul class="detail-view">
               <li><b>Title</b></li>
               <li>{{x.LinkTitle}}</li>
               <li><b>Comments</b></li>
               <ul>
                  <li ng-repeat="f in versionsData" ng-if="f.Comments">
                     <!-- I tried to replicate the way SharePoint shows the info (with name, date and comment --->
                     {{f.Editor.LookupValue}} ({{f.Modified | date: 'MM/dd/yyyy'}}): {{f.Comments}}
                  </li>
               </ul>
               <li><b>Status</b></li>
               <li>{{x.Status}}</li>
                .
                .
                .
            </ul>
         </div>
      </div>
   </div>
</div>