Create a filter which takes map and returns a list of key value pairs. Useful for iterating over Maps

[mhevery]

<div ng-repeat="item in map | items"> 
  {{item.key}}: {{item.value}}
</div>

this implies

class KeyValue {
  var key;
  var value
}

@Formatter('items')
class Items {
  List<KeyValue<K, V>> call(Map<K, V> map) => ...;
}

[zoechi]

/sub

[vicb]

@mhevery do you think that a map.items would help here - that would return an Iterable<MapItem<K,V>>, MapItem would have both .value and a .key getters. I could submit a patch to the collection core lib for that.

[antonmoiseev]

We wrote simple straightforward implementation for our project:

@NgFilter(name: 'mapToList')
class MapToListFilter {
  call(Map map) {
    return new Map.fromIterable(map.keys,
      key:   (key) => key,
      value: (key) => new _KeyValue(key, map[key])).values;
  }
}

class _KeyValue {
  var key, value;
  _KeyValue(this.key, this.value);
}

But when we try to use it:

<div ng-repeat="item in cmp.items | mapToList"
     ng-click="cmp.select(item.key)">{{item.value}}</div>

We get following error at runtime:

5 $digest() iterations reached. Aborting!
Watchers fired in the last 3 iterations: [["item in cmp.items | mapToList","Closure: (dynamic, [FilterMap]) => dynamic from Function 'eval':.","Closure: (dynamic, [FilterMap]) => dynamic from Function 'eval':."],["item in cmp.items | mapToList","Closure: (dynamic, [FilterMap]) => dynamic from Function 'eval':.","Closure: (dynamic, [FilterMap]) => dynamic from Function 'eval':."],["item in cmp.items | mapToList","Closure: (dynamic, [FilterMap]) => dynamic from Function 'eval':.","Closure: (dynamic, [FilterMap]) => dynamic from Function 'eval':."]]

STACKTRACE:
#0      Scope._digestWhileDirtyLoop (package:angular/core/scope.dart:526:5)
#1      Scope.$digest (package:angular/core/scope.dart:475:28)
#2      _autoDigestOnTurnDone (package:angular/core/scope.dart:153:14)
#3      _rootRun (dart:async/zone.dart:710)
#4      _ZoneDelegate.run (dart:async/zone.dart:440)
#5      NgZone._finishTurn (package:angular/core/zone.dart:91:21)
#6      NgZone._onRunBase (package:angular/core/zone.dart:56:43)
#7      _onRunUnary (package:angular/core/zone.dart:65:15)
#8      _ZoneDelegate.runUnary (dart:async/zone.dart:449)
#9      _CustomizedZone.runUnary (dart:async/zone.dart:654)
#10     _BaseZone.runUnaryGuarded (dart:async/zone.dart:569)
#11     _BaseZone.bindUnaryCallback.<anonymous closure> (dart:async/zone.dart:595)

Have we really succeeded to screw up in these 10 LOC or maybe there is an issue in AngularDart?

[bgourlie]

@antonmoiseev Your filter is taking a Map and returning a Map. Shouldn't it be returning a List<_KeyValue>?

[antonmoiseev]

It does, there is a .values property at the end of the expression. Sorry for not making it more obvious to read.

[bgourlie]

Does doing it this way make any difference?

return map.keys.map((key) => new _KeyValue(key, map[key])).toList();

[antonmoiseev]

Unfortunately no, the same thing. As I can see my filter is invoked multiple times, though I would expect it to be invoked only once.

[chalin]

Would it not be more Dart-like to simply allow use of Map#keys and then Map#[]; e.g.

    <div ng-repeat="item in aMap.keys">{{aMap[item]}}</div>

though I understand that this would be breaking away from the AngularJS way.

[mhevery]

I like @chalin idea

[chalin]

Finally found time yesterday to work on this. Hopefully, #605 will be enough to address the concerns raised by this issue.

[chalin]

Btw, I wanted to mention that this issue is related to the following broader issue: #606.

[mhevery]

See: #397 (comment)