CODEWITHSUNDEEP
javascriptangularjsarraysangularjs-ng-repeat
DevRight
DevRight

Reputation: 395

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

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

enter image description here

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

Upvotes: 0

Views: 77

Answers (1)

Weedoze
Weedoze

Reputation: 13943

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);
        });
};

Upvotes: 6

Related Questions