How to iterate over an array stored in an object using ng-repeat

Question

I make a call to an API endpoint which returns a single object. I want to loop over an array named video stored in the object and return all the links stored in the array to the view.

JSON object returned from the API

html code

<div class="myVideo" ng-repeat="v in courses.video">
     <iframe width="560" height="315" ng-src="{{'v.video'}}" 
      frameborder="10" allowfullscreen></iframe>
</div>

Function in controller for API call

$scope.getCourse = function(id){
        coursesFac.getCourseById(id)
            .then(function (response) {
                $scope.courses = response.data;
                var items =response.data;
                console.log(items);
                //console.log($scope.courses.video);
            }, function (error) {
                $scope.status = 'Unable to load course data: ' + error.message;
                console.log($scope.status);
            });
    };

This error appears on the view where videos should be displaying

It looks like your array in courses.video is a string, try converting it to an array first because I don't see any issues with your ng-repeat — Patrick Barr
– Patrick Barr, Commented Mar 13, 2017 at 14:52

Weedoze · Accepted Answer · 2017-03-13 14:52:02Z

6

courses.video is a string - not an array. You need to parse the json

$scope.getCourse = function(id) {
    coursesFac.getCourseById(id)
        .then(function(response) {
            response.data.video = JSON.parse(response.data.video); //HERE
            $scope.courses = response.data;
            var items = response.data;
            console.log(items);
            //console.log($scope.courses.video);
        }, function(error) {
            $scope.status = 'Unable to load course data: ' + error.message;
            console.log($scope.status);
        });
};

answered Mar 13, 2017 at 14:52

Weedoze

14k2 gold badges37 silver badges65 bronze badges

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

6 Comments

xaggre Over a year ago

This also applies to enroled (no typo)

DevRight Over a year ago

@Weedoze So I added the parsing of the array to json as you showed in your answer. But I still get a localhost:8080/v.video 404 () error. What am I missing here. Thanks

Weedoze Over a year ago

@SeanMcGrath What are you trying with this url ? 404 mean not found... This has nothing to do with the code provided

DevRight Over a year ago

I have edit the question to show the error message displayed in the view. What I want is for all the video links to be displayed in the view. When i ng-repeat over the array I want the video displayed.

Weedoze Over a year ago

@SeanMcGrath I answered the question. There was an error with JSON parsing. This error is solved. Now you are coming with a total other problem

|

Collectives™ on Stack Overflow

How to iterate over an array stored in an object using ng-repeat

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related