Learning to loop over a Map issue

Question

I've been following along an online tutorial on ES6/Typescript and use of Map structures.

Location: https://codecraft.tv/courses/angular/es6-typescript/mapset/

Issue is that nothing displays from the loops at all. I have compared what I have written tot he tutorial and cannot for the life of me understand why it will not output the data in the for loops.

Would someone please tell me why this does not work when the code on the tutorial video shows that it does?

Here is the code

function mapDisplay(){
        let ddData = new Map([
          ["this", 11],
          ["doesnt", 21],
          ["work", 31]
        ])
    
        console.log('show ddData');
        console.log(ddData);
    
        console.log('show key');
        // Loop over our Map using keys function
        for (let key of ddData.keys()) {
          console.log(key);
        }
    
        console.log('show values')
        // Loop over our Map using values function
        for (let val of ddData.values()) {
          console.log(val);
        }

        console.log('show entries')
        // Loop over our Map using entries function
        for (let entry of ddData.entries()) {
          console.log(entry[0], entry[1]);
        }
      }
    
      mapDisplay();

What I see in the output console is this. As you can see no output comes from the loops:

In the console, `ddData` isn't a `Map`, but an `Array`. Maybe you have a line like `import { Map } from...` in your file? — mbojko, Jun 06 '19 at 13:29
Your code should work properly in all modern browsers. Which browser do you use? Try to run it in different browser — Andriy, Jun 06 '19 at 13:40
@Elijah, try to run the code in your question with open console. Does it work properly now? — Andriy, Jun 06 '19 at 14:53
Note: [tag:angularjs] != [tag:angular] (though neither is really relevant to this question anyway.) — msanford, Jun 06 '19 at 14:55

score 2 · Accepted Answer · edited Jun 06 '19 at 14:48

2

Map.values()/Map.keys() returns an Iterator object [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/values. You should convert to Array using Array.from().

See the following code -

function mapDisplay(){
    let ddData = new Map([
      ["this", 11],
      ["doesnt", 21],
      ["work", 31]
    ]);

    console.log('show ddData');
    console.log(ddData);

    console.log('show key');
    // Loop over our Map using keys function
    for (let key of Array.from(ddData.keys())) {
      console.log(key);
    }

    console.log('show values')
    // Loop over our Map using values function
    for (let val of Array.from(ddData.values())) {
      console.log(val);
    }

    console.log('show entries')
    // Loop over our Map using entries function
    for (let entry of Array.from(ddData.entries())) {
      console.log(entry[0], entry[1]);
    }
  }

  mapDisplay();

edited Jun 06 '19 at 14:48

Andriy

14,781
4
46
50

answered Jun 06 '19 at 13:51

user2216584

5,387
3
22
29

4

@"You should convert to Array using Array.from()" - why? You can iterate with `for... of` loop over an `Iterator` directly. – mbojko Jun 06 '19 at 13:55
@user2216584 Thank you & **mbojko** - What you have posted DOES WORK. The dillema that I have is the code from the friggin video tutorial which works in the video is not working for me. Makes it difficult to learn something if the result cannot be reproduced by someone trying to learn it. – edjm Jun 06 '19 at 14:00
I also ran the code in stackblitz. It appears that stackblitz bundles the code by targetting es5. So in es5 you can use Map but to iterate you need to use Array.from(). But in es6 you dont need to if you target output in es6. – user2216584 Jun 06 '19 at 15:13

Andriy · Answer 2 · 2019-06-06T14:53:01.513

2

It looks like you are running your code in STACKBLITZ and checking output in its console, for example https://stackblitz.com/edit/js-n9wnqp. Which is just JS console imitator.

Your code is perfectly correct in terms of JS and should run in all modern browsers.

Please check output in your original question, I updated it.

The values() method returns a new Iterator object

You do not need to convert iterable object to array because

The for...of statement creates a loop iterating over iterable objects, including: built-in String, Array, Array-like objects (e.g., arguments or NodeList), TypedArray, Map, Set, and user-defined iterables.

edited Jun 06 '19 at 14:53

answered Jun 06 '19 at 14:44

Andriy

14,781
4
46
50

I ran the code locally as I had it originally and you are absolutely correct. It works locally. I honestly have not run any of the tutorial stuff locally, just in stackblitz. Thank you as well for these links. – edjm Jun 06 '19 at 14:56
Also, thank you for updating the post with the ability to run the code inline. I've not seen that done on the forum before. – edjm Jun 06 '19 at 15:07

Learning to loop over a Map issue

2 Answers2