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.

ngRepeat might shed some light.

tcooc
– tcooc

2016-11-30 22:05:08 +00:00
Commented Nov 30, 2016 at 22:05 — tcooc
– tcooc, Commented Nov 30, 2016 at 22:05

Heretic Monkey · Accepted Answer · 2016-11-30 22:22:35Z

2

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>

edited Nov 30, 2016 at 22:22

Heretic Monkey

12.2k7 gold badges62 silver badges133 bronze badges

answered Nov 30, 2016 at 22:11

RickCoxDev

1651 silver badge11 bronze badges

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

2 Comments

jeremy Over a year ago

is there a way for me to iterate in the controller? because i have to put ?type=pdf at the end of the url

RickCoxDev Over a year ago

In that case you can do {{url + document.documentId + '?type=pdf'}} in your HTML. If you really want to iterate in the controller you can build the urls with a forEach over the array.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related