Map bound to AngularJS scope becomes empty object

Question

Whenever I try to bind a Map to the scope, it is replaced with an empty object during the digest cycle. Can anyone explain why this is happening?

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.testMap = new Map();
    $scope.testMap.set("testKey", "testValue");
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <pre>{{testMap}}</pre>
</div>

It not gets replaced, it's only rendered this way. You can still use it, however I think change detection does not work on sets and maps. — Tamas Hegedus
– Tamas Hegedus, Commented Feb 19, 2016 at 18:51
Are you sure the Map is being replaced with an empty object? There's nothing magical happening in the code you've shown. Maybe the problem is that how Angular evaluates the expression {{testMap}}? Have you tried {{testMap | json}} or {{testMap.get('testKey')}}? — Sunil D.
– Sunil D., Commented Feb 19, 2016 at 18:53

Community · Accepted Answer · 2017-05-23 12:07:31Z

3

Transforming a Map to JSON is not supported (or, to be precise, the entries of the map are not serialized as if they were the fields of a regular object).

So Angular can't display the content of the map (the json filter is implicitly used when displaying an object using {{ testMap }}.

Demonstration: http://plnkr.co/edit/AjJWNGXZLR5KhhJ8cz0g?p=preview

Related: How do you JSON.stringify an ES6 Map?

edited May 23, 2017 at 12:07

CommunityBot

11 silver badge

answered Feb 19, 2016 at 18:51

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

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

Collectives™ on Stack Overflow

Map bound to AngularJS scope becomes empty object

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related