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

Question

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

我有两个 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!");
});

来自两个 JSON 文件（courses.json 和 users.json）的数据如下所示：

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-if 的ng-repeat 标签来模拟“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>