Angular ng-repeat filtering by matching to another array's value

Question

I am having a really hard time figuring out how to filter a scope object (row.matric && row.dimension) based on another scope object (metrics && dimension) by matching keys.

The code below is an example of the objects that i am using.

In the ng-repeat="row in rows” section; I need to only show the row.metric or row.dimention if and only if its partner metric or dimension has the key of tabled set to true.

row.metric and row.dimension are matched to metric and dimension by the key key.

For example: The row.metric ‘visits’ should be displayed, but ‘pageviews’ should not be displayed.

Here is a Plunker ( this this instead of the cod below ) the number 400 and 20 should NOT be displayed.

http://plnkr.co/edit/t15L5y40h8enPzUkkaJw?p=preview

HTML:

<table class="table">
    <thead>
        <tr>
            <th class="dimension" ng-repeat="dimension in dimensions | filter:{tabled:true}" >{[{ dimension.name }]}</th>
            <th class="metric" ng-repeat="metric in metrics | filter:{tabled:true}" >{[{ metric.name }]}</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="row in rows">
            <td class="dimension" ng-repeat="dimension in row.dimensions" >{[{ dimension.value }]}</td>
            <td class="metric" ng-repeat="metric in row.metrics" >{[{ metric.current }]}</td>
        </tr>
    </tbody>
</table>

Objects:

metrics Example: [
    {
        name: 'Visits',
        key: 'visits',
        tabled: true
    },
    {
        name: 'Page Views',
        key: 'pageviews',
        tabled: fales
    }
]

dimension Example: [
    {
        name: 'Source',
        key:  'source'
        tabled: true
    },
    { ... }
]


row Example: {
    metrics: [
        {key: 'visits', current: '203'},
        {key: 'pageviews', current: '104'},
        {...}
    ]
    dimensions: [
        {key: 'source', value: 'google'},
        {...}
    ]
}

hard to follow guidleines, tabled for PageViews is true so why would it not be shown? A live demo would help, perhaps also showing expected output as well — charlietfl
– charlietfl, Commented Sep 13, 2014 at 2:36
fixed, sorry it was pageviews is supposed to be false. It is edited and fixed now. @charlietfl — KernelCurry
– KernelCurry, Commented Sep 13, 2014 at 18:41
IFF === "if and only if" ... that being said i am writing a better description of the problem now and it will be updated in a ew minutes @Lucio — KernelCurry
– KernelCurry, Commented Sep 13, 2014 at 18:43
It is very unclear what you are trying to achieve (and the question itself is full of typos which makesit even harder to follow). You should at least show what the expected output is. — gkalpak
– gkalpak, Commented Sep 13, 2014 at 18:59

Jonathan Sheely · Accepted Answer · 2014-09-13 19:28:04Z

4

Answered in the #angularjs IRC.

Here is the plunker that resolved the issue. Note that this is probably not the most performant and recommendation is to refactor the data.

Uses ng-if with a scope function

  $scope.isTabled = function(key) {
    console.log(key);
    return _.find($scope.metrics,function(o){
      return o.key == key;
    }).tabled;

http://plnkr.co/edit/tUNFx5uli4ABDQcpkUjx?p=preview

answered Sep 13, 2014 at 19:28

Jonathan Sheely

5011 gold badge6 silver badges13 bronze badges

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

2 Comments

Constantinos Over a year ago

This is arguably a better solution than mine

FakirTrappedInCode Over a year ago

Helped me resolve the key value from an API that returned list of results stackoverflow.com/questions/40386680/… In this mockup question: the Continent key could be resolved with this answer.

Constantinos · Accepted Answer · 2014-09-13 19:28:29Z

3

You just need a custom filter, see plunker

<td class="dimension" ng-repeat="dimension in row.dimensions | filter:isTabled(dimensions)">
<td class="metric" ng-repeat="metric in row.metrics| filter:isTabled(metrics)">

$scope.isTabled = function(list) {
  return function(item) {
    return list.some(function(matchingItem) {
      return item.key == matchingItem.key && matchingItem.tabled;
    });
  }
}

edited Sep 13, 2014 at 19:28

answered Sep 13, 2014 at 19:10

Constantinos

1,20812 silver badges18 bronze badges

Collectives™ on Stack Overflow

Angular ng-repeat filtering by matching to another array's value

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related