how to iterate through an array and display it in $scope (angularjs)

Question

Problem:

I am showing a list of documents in my application and one of the fields is a preview icon which shows a modal to display a pdf preview of the document. I am building a url to make it dynamic but I'm not sure how to iterate through the array

Controller:

$scope.documentIdentifier = documents.documentBag[0].documentId;
$scope.url = $sce.trustAsResourceUrl("http://localhost:3000/services/v1/" + $scope.documentId + "?type=pdf");

My object:

    {
      "documents": "Success",
      "documentBag": [
        {
          "documentId": "E1DUPW9JPP1GUI3"
        },
        {
          "documentId": "E1FUJW5JPP1GUI4"
        },
        {
          "documentId": "G1DUJW3JPP1GUI5"
        }
      ]
    }

I need to iterate through the documentId to show all 3 documents but not exactly sure how.

Answer 1

Use ng-Repeat to iterate over the array and build your url.

$scope.documents = documents.documentBag;
$scope.url = $sce.trustAsResourceUrl("http://localhost:3000/services/v1/");

<div ng-repeat="document in documents">
    {{url + document.documentId}}
</div>