I am trying to retrieve data from an API endpoint that returns a single object. Within this object, there is an array called video which I want to iterate over and display all the links stored in the array on the view.
The JSON object returned by the API:
https://i.sstatic.net/s6q0B.png
HTML code snippet:
<div class="myVideo" ng-repeat="v in courses.video">
<iframe width="560" height="315" ng-src="{{'v.video'}}"
frameborder="10" allowfullscreen></iframe>
</div>
Function inside the controller for making the 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);
});
};
An error message is displaying instead of the videos on the view: https://i.sstatic.net/ctX0g.png