title: Convert a map to an array - Angular 6 and JHipster
body: <p><strong>Goal:</strong> To convert a map that I retrieved from a server to a array in order to make it appear in the HTML. Indeed, I could see in the forums that a map is not suitable for an *ngFor structural directive.</p>
  
  <p><strong>Try:</strong> </p>
  
  <p>The map looks like this (in reality there are also objects inside the objects but I don't think it changes a lot the result):</p>
  
  <p>{</p>
  
  <p>"Mission 1":[
  {
  "id": 1
  "quantite":0
  "date" : 2018-04-01
  },
  {
  "id": 2
  "quantite":0
  "date" : 2018-04-02
  }
  ],</p>
  
  <p>"Mission 2":[
  {
  "id": 3
  "quantite":0
  "date" : 2018-04-01
  },
  {
  "id": 4
  "quantite":0
  "date" : 2018-04-02
  }
  ]</p>
  
  <p>}</p>
  
  <p>I tried to use this code:</p>
  
  <pre><code>     this.mapToArray = Array.from(this.map);
  </code></pre>
  
  <p><strong>Issue:</strong> Well the map is found. But then, for mapToArray, it is set to undefined like nothing happened with the Array.from(map). </p>
  
  <p>Could you help me please?</p>
  
  <p>Thanks!</p>
  
  <p><strong>EDIT EDIT EDIT EDIT</strong> </p>
  
  <p>Hey,</p>
  
  <p>Thanks for your answers. </p>
  
  <p>First, the methods related to a map like forEach() and others do not work. I might be wrong but from what I saw during my researches, the Map interface is not available in TypeScript (which is the language used in Angular 5-6). I tried the solutions you suggested but I couldn't make it work.</p>
  
  <p>Second, I made little advances but I lack something. If you have any idea:</p>
  
  <p><strong>TypeScript Side</strong></p>
  
  <pre><code>export class DetailComponent implements OnInit, OnDestroy {
  
  
  
  map: { [index:string], ArrayList:Details } = {};
  
  valueMission: ArrayList&lt;Details&gt;;
  
  constructor(private activatedRoute: ActivatedRoute) { }
  
  ngOnInit() {
  
      this.activatedRoute.data.subscribe(({ details }) =&gt; {
          this.map = details;
          this.valueMission = this.map["Mission 1"];
      });
  
      }
  </code></pre>
  
  <p><strong>HTML Side</strong></p>
  
  <pre><code>&lt;p&gt; {{valueMission[0].dayOfMonth}}&lt;/p&gt;
  </code></pre>
  
  <p><strong>Comment</strong></p>
  
  <p>So this works. In my HTML table, the dayOfMonth is shown. Now, what I need to do is to create an array for the keys, to be able to create a corresponding array like valueMission for each key and then be able to show them in the HTML. Any clue? </p>
  
  <p>Thanks, </p>
  
  <p>Manu</p>