photoscene photoscene - 6 months ago 39
AngularJS Question

How to get data from related object in angular?

I'm novice in JS and Angular. I'm facing issues getting data from a JSON file. Here is how the structure looks:
enter image description here

My service looks like this:

(function(){
angular.module('models')
.service('lessonService', function ($http, Backand) {

var baseUrl = '/1/objects/';
var objectName = ['lessons/', 'subCategories', 'lessons_categories_switch'];
function getUrlAllLessons () {
return Backand.getApiUrl() + baseUrl + objectName[0];
};
/*All Lessons*/
getLessons = function () {
return $http.get(getUrlAllLessons());
};
/*Subcategories*/
function getUrlSubcategories () {
return Backand.getApiUrl() + baseUrl + objectName[1];
};
getCategories = function () {
return $http.get(getUrlSubcategories());
};
/*Category Lesson Swith*/
function getUrlSwitch () {
return Backand.getApiUrl() + baseUrl + objectName[2];
};
getSwitch = function () {
return $http.get(getUrlSwitch());
};
return {
getLessons: getLessons,
getCategories: getCategories,
getSwitch: getSwitch
};
})

})();


My controller is the following:

(function(){
angular.module('appLessons', ['backand'])
.controller('lessonCtrl', function($scope, Backand, lessonService){
$scope.lessons = [];
$scope.subCategories = [];
$scope.switches = [];
function getAllLessons() {
lessonService.getLessons()
.then(function (result) {
$scope.lessons = result.data.data;
});
};
function getAllSubCategories() {
lessonService.getCategories()
.then(function (result) {
$scope.subCategories = result.data.data;
});
};
function getAllSwitch() {
lessonService.getSwitch()
.then(function (result) {
$scope.switches = result.data.data;
});
};
getAllLessons();
getAllSubCategories();
getAllSwitch();
})
.controller('lessonDetailCtrl', ['$scope', '$routeParams', '$http', 'Backand', function($scope, $routeParams, $http, Backand) {
$http.get(Backand.getApiUrl() + '/1/objects/lessons/' + $routeParams.id)
.success(function(data) {
$scope.lesson = data;
$scope.code = $scope.lesson.youtubeVideoCode;
});
$scope.closeLeftBar = function (){
var categoryList = $('.left-lessons');
categoryList.hide();
};
}])
})();


And I'm trying to get all the lessons' name which belong to one of the subcategories.

In the view I have this code:

<div ng-repeat="category in subCategories">
<div ng-show="category" class="col-md-3 lesson-tile">
<h2>{{ category.name }} </h2> // this works
<div ng-repeat="lesson in category.lessons">
<div ng-show="lesson" class="col-md-3 lesson-tile">
<h2>{{ lesson.name }} </h2> // I have problems here
</div>
</div>
</div>
</div>


What do I wrong? Any help is appreciated, thank to you all.

Answer

There isn't lessons prop inside your category. You should include or check all lessons and show if it by category.

Can you try this:

<div ng-repeat="category in subCategories">
    <div ng-show="category" class="col-md-3 lesson-tile">
        <h2>{{ category.name }} </h2> // this works
        <div ng-repeat="lesson in lessons">
            <div ng-show="checkCategory(category,lesson)" class="col-md-3 lesson-tile">
                <h2>{{ lesson.name }} </h2> // I have problems here
            </div>
        </div>
    </div>
</div>

Ng Function:

$scope.checkCategory = function(currentCategory,currentLesson){
    console.log(currentCategory);
    console.log(currentLesson);
    console.log($scope.switches);
    if($filter('filter')($scope.switches, {category : currentCategory.id + "", lesson: currentLesson.id + ""}).length > 0 )
        return true; 
    return false;
};

Ps: Filter can be change your json object. Maybe you should filter category something like this:

{Id : currentCategory.Id}

https://docs.angularjs.org/api/ng/filter/filter

Comments