Angular ng-repeat filter on nested array in object

Question

I'm trying to applay a filter in my ng-repeat based on a nested array. The object that is used for the ng-repeat:

Updated

master_array:

   {
  "0": {
    "Employee_Id": "hni",
    "comptencies": [
      {
        "Title": "Bunker Knowledge",
        "Level": 1
      },
      {
        "Title": "Bunker Knowledge",
        "Level": 3
      },
      {
        "Title": "IT Compliance",
        "Level": 2
      },
      {
        "Title": "Bunker Knowledge",
        "Level": 5
      }
    ],
  }
}

JS:

$scope.myFilter = {
    competencyTitle : ""
}

HTML:

<label>Competencies
<select ng-model="myFilter.competencyTitle" ng-options="item.Title for item in competencies_list"></select>
</label>


<tr ng-repeat="item in master_array | filter: { competencies: [{ Competency.Title: myFilter.competencyTitle }] }">

The above doesn't work.

Case

I have a list of employees and each employee has an id and array of competencies attached. Each item in this array has a comptency array attached, which holds the title an id of the competency. What I want is to be able to filter out employees with specific competencies.

Any suggestions?

You are referring to competencies_list but it should be competencies. — Aer0
– Aer0, Commented Mar 9, 2016 at 10:01
The competencies_list is used to create select options. The values are identical to those inside the master_array, so no. — TietjeDK
– TietjeDK, Commented Mar 9, 2016 at 10:04

lisa p. · Accepted Answer · 2016-03-09 13:19:58Z

1

I found a solution. You probably have to adapt it to your specific code:

The main idea is this: filter: { $: {Title: myFilter.competencyTitle.Title} }

The $ selects any element whose child is Title.

html

<label>Competencies {{myFilter.competencyTitle.Title}}
    <select ng-model="myFilter.competencyTitle" ng-options="item.Title for item in competencies_list"></select>
</label>


<p ng-repeat="item in master_array | filter: {  $: {Title: myFilter.competencyTitle.Title}  }">{{item.employee_id}} {{item.competencies}}    </p>

js - this is the model is used, I'm not sure if this reflects your actual model.

$scope.competencies_list = [{Title : "Math"},{Title : "English"},{Title : "Spanish"}];

$scope.master_array = 
[
    {         
        employee_id: "hni",         
        competencies:
            [
                {Title : "Math", "Level": 1},
                {Title : "English", "Level": 2}           
            ]
    }, 
    {
        employee_id: "xyz",         
        competencies:
            [
                {Title : "Spanish", "Level": 3},
                {Title : "English", "Level": 5}           
            ]
    }
];

$scope.myFilter = {
    competencyTitle : ""
};

edited Mar 9, 2016 at 13:19

answered Mar 9, 2016 at 10:19

lisa p.

2,15621 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

lisa p. Over a year ago

The "object" you posted above is not valid json and not javascript to my understanding.

TietjeDK Over a year ago

I will edit the "object" to represent its real representation. It is valid in my production code. This one was just for displaying the structure. However i get an error from your code: Error: [filter:notarray] Expected array but received: {}

lisa p. Over a year ago

"This error occurs when filter is not used with an array". Make sure master_array is an array. Can you post the structure of master_array?

TietjeDK Over a year ago

I have updated the object in the op. Also made some small changes to the structure.

TietjeDK Over a year ago

Never mind the last comment. You were spot on! Thanks

|

Collectives™ on Stack Overflow

Angular ng-repeat filter on nested array in object

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related