# Map event listening

**URL:** <https://forums.bitovi.com/t/map-event-listening/890>\
**Category:** CanJS\
**Created:** [May 23, 2018, 2:36pm UTC](https://forums.bitovi.com/t/map-event-listening/890 "2018-05-23T14:36:56Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![fp\_dev](https://avatars.discourse-cdn.com/v4/letter/f/13edae/32.png) [@fp\_dev](https://forums.bitovi.com/u/fp_dev)\
**Post date:** [May 23, 2018, 2:36pm UTC](https://forums.bitovi.com/t/map-event-listening/890/1 "2018-05-23T14:36:56Z")

</div>

Hi everybody,

Is it possible, with CanV4 to listen to changes for all keys in a Map or a List that includes nested Maps?

For instance:  
`const Coordinates = can.Map.extend({ latitude: "number", longitude:"number"});`  
`const Address = can.Map.extend({ addr:"string", num:"string", city:"string", coordinates:{ Default: Coordinates} });`  
`const People = can.Map.extend({ name: "string", lastName: "string", address: { Default: Address });`

`let John = new People( { name:"John", lastName:"Doe", address:{ addr:"Avenur Str.", num:22, city:"Dover", coordinates: { latitude: 51.133914, longitude: 1.3198505});`

If i want to listen any changes in “John” i should do something like:

```
John.on("name", ()=>{ ... });
John.on("lastName", ()=>{ ... });
John.on("address.addr", ()=>{ ... });
John.on("address.num", ()=>{ ... });
// etc...

```

Or use a function that will iterate on each key (recursively).

Is there something quicker and also usable for nested object like, for instance:  
`John.on("change", ()=>{...})`

Thank you for the support.

---

<div class="post-metadata">

**Author:** ![justinbmeyer](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/justinbmeyer/32/179_2.png) [@justinbmeyer](https://forums.bitovi.com/u/justinbmeyer)\
**Post date:** [May 23, 2018, 3:47pm UTC](https://forums.bitovi.com/t/map-event-listening/890/2 "2018-05-23T15:47:37Z")

</div>

Generally what I do is create a compute that returns `.get()` of the object you want to observe changes on …

```auto
DefineMap.extend({
  nestedThing: {
    default(){ 
      return { 
        name:"John", lastName:"Doe", address:{ addr:"Avenur Str.", num:22, city:"Dover", coordinates: { latitude: 51.133914, longitude: 1.3198505} 
      };
    } 
  },
  get nestedThingData(){ 
    return this.nestedThing.get();
  },
  connectedCallback(){
    this.listenTo("nestedThingData", function(){ /*called when anything changes */ }
  }
})

```

---

<div class="post-metadata">

**Author:** ![fp\_dev](https://avatars.discourse-cdn.com/v4/letter/f/13edae/32.png) [@fp\_dev](https://forums.bitovi.com/u/fp_dev)\
**Post date:** [May 23, 2018, 6:46pm UTC](https://forums.bitovi.com/t/map-event-listening/890/3 "2018-05-23T18:46:18Z")

</div>

Than you! I tried this approach and it works like a charm!!! 😀

I also tried set the “nestedThing” with any customized extended map and catch also changing events of properties that are not defined by default (a not sealed map).

Thank a lot!

---

<div class="post-metadata">

**Author:** ![jeroencornelissen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/jeroencornelissen/32/180_2.png) [@jeroencornelissen](https://forums.bitovi.com/u/jeroencornelissen)\
**Post date:** [May 28, 2018, 12:41pm UTC](https://forums.bitovi.com/t/map-event-listening/890/4 "2018-05-28T12:41:59Z")

</div>

👍 for this technique.

We used it on a DefineList containing DefineMaps, like this:

```auto
items: {
    default() {
      return [{name:'a', type: 'atype'}, {name:'b', type: 'btype'}, {name:'c', type: 'ctype'}]
    }
  },
  get itemsWatcher() {
    return this.items.reduce((watcher, item) => {
      watcher.set(item.type, item.name);
      return watcher;
    }, new can.DefineMap()).get()
  }
  connectedCallback() {
    this.listenTo('itemsWatcher', (ev, newVal) => {
      console.log('itemChanged', newVal);
    });
  }

```

> **[JS Bin](https://jsbin.com/ranoteh/edit?html,js,output)**
>
> A live pastebin for HTML, CSS & JavaScript and a range of processors, including SCSS, CoffeeScript, Jade and more...