對兩個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>