如何使用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.

我调用一个返回单个对象的API端点。我想循环存储在对象中的名为video的数组，并将存储在数组中的所有链接返回给视图。

JSON object returned from the API

从API返回的JSON对象

html code

HTML代码

<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

用于API调用的控制器中的函数

$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

视频应显示的视图上会显示此错误

1 个解决方案

#1

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

courses.video是一个字符串 - 不是数组。你需要解析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);
        });
};