对两个JSON文件中的数据使用ng-repeat

Question

我正在构建某种在线课程库，现在我正在模拟DB数据为JSON文件。我试图做的是在ng-repeat中显示用户获得的课程。我有两个JSON文件，一个用于用户，另一个用于课程，我想知道如何交叉引用这两个文件以显示我想要的数据。

我有存储在两个变量的数据形成两个JSON文件，规定如下：从两个JSON文件（courses.json和users.json）

//load user data 
$http.get("users.json") 
.then(function mySuccess(response){ 
    $scope.appUsers = response.data; 
}, function myError(response){ 
    console.log("Error loading user data!"); 
}); 

//load course data 
$http.get("courses.json") 
.then(function mySuccess(response){ 
    $scope.appCourses = response.data; 
}, function myError(response){ 
    console.log("Error loading course data!"); 
}); 

的数据看起来是这样的：

users.json

[{ 
    "username": "user1", 
    "password": "123456", 
    "name": "Joe", 
    "courses": [{"id": 1}, {"id": 2}, {"id": 3}, {"id": 4}, {"id": 5}, {"id": 6}, {"id": 7}, {"id": 8}] 
}, { 
    "username": "user2", 
    "password": "654321", 
    "name": "Jane", 
    "courses": [{"id": 2}, {"id": 4}, {"id": 5}, {"id": 7}] 
}] 

courses.json

[{ 
    "id": 1, 
    "name": "Web Design", 
    "image": "images/portfolio/p1.jpg", 
    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et faucibus metus, ac efficitur felis.", 
    "price": "35€" 
}, { 
    "id": 2, 
    "name": "Photoshop Level 1", 
    "image": "images/portfolio/p2.jpg", 
    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et faucibus metus, ac efficitur felis.", 
    "price": "35€" 
}, { 
    "id": 3, 
    "name": "Game Design", 
    "image": "images/portfolio/p3.jpg", 
    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et faucibus metus, ac efficitur felis.", 
    "price": "35€" 
}, { 
    "id": 4, 
    "name": "Photography Level 1", 
    "image": "images/portfolio/p4.jpg", 
    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et faucibus metus, ac efficitur felis.", 
    "price": "35€" 
}, { 
    "id": 5, 
    "name": "Web Design Masters", 
    "image": "images/portfolio/p5.jpg", 
    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et faucibus metus, ac efficitur felis.", 
    "price": "35€" 
}, { 
    "id": 6, 
    "name": "Photoshop Level 2", 
    "image": "images/portfolio/p6.jpg", 
    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et faucibus metus, ac efficitur felis.", 
    "price": "35€" 
}, { 
    "id": 7, 
    "name": "Game Design Masters", 
    "image": "images/portfolio/p7.jpg", 
    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et faucibus metus, ac efficitur felis.", 
    "price": "35€" 
}, { 
    "id": 8, 
    "name": "Photography Level 2", 
    "image": "images/portfolio/p1.jpg", 
    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et faucibus metus, ac efficitur felis.", 
    "price": "35€" 
}] 

我有这个ng-repeat标签与ng-if模拟“USER1”已登录：

<div ng-repeat="course in appCourses" ng-if="appUsers[0].username == 'user1'">...</div> 

现在我缺少的是什么我应该做的，只显示USER1有课程。

谢谢。

Answer 1

在执行ng-repeate之前，您可以遍历用户和课程（在javascript中）并将相关课程作为数组添加到每个用户。

然后，你可以简单地做这样的事情：

<div ng-repeat="course in user.courses">...</div> 

或

<div ng-repeat="user in users"><div ng-repeat="course in user.courses">...</div></div> 

你到底想反正显示？

Answer 2

最好的解决方案是更改users.json文件（或API），使其包含您需要的课程数据，而不仅仅是ID。

如果这是不可能的，尝试这样的事情：

// do some check to see which user is signed in, in this case it's user1 
$scope.currentUser = $scope.appUsers[0]; 

var i = 0; 

angular.forEach($scope.currentUser.courses, function(courseId) { 
    var selectedCourse = $scope.appCourses.filter(function(course) { 
    return courseId === course.id; 
    })[0]; 

    angular.merge($scope.currentUser.courses[i], selectedCourse); // adds all necessary course data to that user's courses array 

    i++; 
}); 

然后，所有你需要在你的模板做的是：

<div ng-repeat='course in currentUser.courses'> 
    <!-- all course info here --> 
</div>