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-repeat标记ng-if来模拟＆＃34; user1＆＃34;已登录：

<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。

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

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

然后您在模板中需要做的就是：

docker-py

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

2 个答案: