Most played song - good way to retrieve data

dashboard/src/app/dashboard.component.html

@@ -11,7 +11,5 @@
 </div>
 
 <div *ngFor="let e of mostPlayedSongs">
-  <div class="module hero">
-    <h4>{{e.Name}}</h4>
-  </div>
+  <h4>{{e['Play Count']}}: {{e.Name}} - {{e.Artist}}</h4>
 </div>

dashboard/src/app/dashboard.component.ts

@@ -36,15 +36,8 @@ export class DashboardComponent implements OnInit {
       this.elsService.getTrackCount("album")
         .then(result => this.trackCountAlbum = result);
 
-      this.elsService.getMostPlayedTrackO().subscribe(
-        data => {
-          data.forEach(element => {
-            this.mostPlayedSongs.push(element._source);
-          });
-          this.mostPlayedSongs.forEach(element => {
-            console.log(element.Name)
-          });
-        }
+      this.elsService.getMostPlayedTrack().subscribe(
+        data => this.mostPlayedSongs = data
       );
   }
 

dashboard/src/app/els.service.ts

@@ -30,27 +30,32 @@ export class ElsService {
                     .catch(this.handleError);
   }
 
-  getTrackCountO(type: string): Observable<number> {
-    return this.http.get(this.elsUrl + type + "/_count")
-                    .map(res => res.json().count as number);
-  }
+  getMostPlayedTrack(): Observable<Song[]> {
+    // Thank to http://chariotsolutions.com/blog/post/angular2-observables-http-separating-services-components/
 
-  getMostPlayedTrack(): Promise<Hits[]> {
-    return this.http.post(this.elsUrl + "song/_search",
-                      JSON.stringify({"sort":[{"Play Count":{"order":"desc"}}],"size": 5}),
-                      {headers: this.headers})
-                    .toPromise()
-                    .then(res => res.json().hits.hits)
-                    .catch(this.handleError);
-  }
-
-  getMostPlayedTrackO(): Observable<Object[]> {
+    // Could be shorter but I think it's more readable like this.
     return this.http
       .post(this.elsUrl + "song/_search",
             JSON.stringify({"sort":[{"Play Count":{"order":"desc"}}],"size": 5}),
             {headers: this.headers})
-               .map(response => response.json().hits.hits as Object[]);
-               // TODO Treat data here to return song instead of in subscribe
+      .map(res => {
+        return res.json().hits.hits;
+      })
+      .map((hits: Array<any>) => {
+        let result:Array<Song> = [];
+        hits.forEach((hit) => {
+          result.push(hit._source);
+        });
+        return result;
+      });
+      // Shorter way:
+      // .map(res => {
+      //   let result: Array<Song> = [];
+      //   res.json().hits.hits.forEach(element => {
+      //     result.push(element._source);
+      //   });
+      //   return result;
+      // });
   }
 
   private handleError(error: any): Promise<any> {

dashboard/src/app/els/Agg.ts

@@ -1,5 +0,0 @@
-export class Agg {
-    aggs : {
-        "intraday_return" : { "sum" : { "field" : "change" } }
-    }
-}

dashboard/src/app/object/hits.ts

@@ -1,6 +0,0 @@
-import { Song } from './song';
-
-export class Hits {
-    _id: string;
-    _source: Song;
-}

dashboard/src/app/object/song.ts

@@ -1,3 +1,5 @@
 export class Song {
     Name: string;
+    Artist: string;
+    "Play Count": number;
 }