angularjs - select with object of object as options

Question

I'm currently trying to build a AngularJS app with a complex data structure.

The data source is an array of people with languages and skill level. I need to filter those people by language skill, to do so I tried to build a select with the languages and another select with the skill levels, but i failed.

Here is a plnkr of my effords

Maybe there is also a simpler/better way to structure the data array ($scope.people)

Answer 1

Take a look at this

Working Demo

Html

<div ng-app='myApp' ng-controller="MainCtrl">LANGUAGES:
    <select ng-model="selectLang" ng-options="lang as lang for lang in languages"></select>
    <br>SKILL:
    <select ng-model="selectSkill" ng-options="skill as skill for skill in skills"></select>
    <br>
    <button ng-click="getPeople()">Submit</button>
    <br>PEOPLE:
    <select ng-model="selectPeoples" ng-options="people as people for people in peoples"></select>
</div>

script

var app = angular.module('myApp', []);
app.controller('MainCtrl', function ($scope) {

    $scope.people = [{
        "name": "Jane Doe",
            "gender": "Female",
            "languages": [{
            "lang": "German",
                "skill": "Good"
        }, {
            "lang": "English",
                "skill": "Very Good"
        }]
    }, {
        "name": "John Doe",
            "gender": "Male",
            "languages": [{
            "lang": "French",
                "skill": "Good"
        }, {
            "lang": "English",
                "skill": "Very Good"
        }]
    }];

    $scope.languages = [];
    $scope.skills = [];
    angular.forEach($scope.people, function (peopleValue, peopleKey) {
        angular.forEach(peopleValue.languages, function (langValue, langKey) {
            $scope.languages.push(langValue.lang);
            $scope.skills.push(langValue.skill);
        });
    });

    $scope.languages = _.uniq($scope.languages);
    $scope.skills = _.uniq($scope.skills);



    $scope.getPeople = function () {
        $scope.peoples = [];
        angular.forEach($scope.people, function (peopleValue, peopleKey) {
            angular.forEach(peopleValue.languages, function (langValue, langKey) {
                if (langValue.lang === $scope.selectLang && langValue.skill === $scope.selectSkill) {
                    $scope.peoples.push(peopleValue.name);
                }
            });
        });
    }
});