Photoshop Question posted in
The official user guide can be found here.

Using ng-repeat with data from two JSON files – Photoshop

I am building some sort of online course library and I am simulating DB data as JSON files for now. What I am attempting to do is show in an ng-repeat the courses the user has acquired. I have two JSON files, one for the users and another for the courses and I would like to know how can I cross-reference both files to show the data that I want.

I have data form two JSON files stored in a two variables as stated below:

//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!");
});

The data from the two JSON files (courses.json and users.json) looks something like this:

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€"
}]

I have this ng-repeat tag with an ng-if to simulate “user1” has logged in:

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

Now I am missing what I am supposed to do to show only the courses that user1 has.

Thank you.

Tags:

2

Answers


  1. 0

    Before executing the ng-repeate, you could loop through your user’s and course’s (in the javascript) and add the related course’s as a array to each user.

    Then you could simply do something like this:

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

    or

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

    What exactly do you want to display anyway?

    Login or Signup to reply.
  2. 0

    The best solution would be to change the users.json file (or API) so it includes the course data you need, instead of just the ID.

    If that’s not possible, try something like this:

    // 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++;
});

    Then all you need to do in your template would be:

    <div ng-repeat='course in currentUser.courses'>
  <!-- all course info here -->
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search