title: Angular 2 Service returns object object
body: <p>thank you for your time in advance, I'm trying to display a collection I pulled from a local mongodb collection.
  <a href="http://localhost:8080/player/all" rel="nofollow noreferrer">http://localhost:8080/player/all</a> is the API endpoint which returns the right data when I test it with postmaster. It's an array of objects. The HTML only shows [object Object] for each object like:</p>
  
  <p>[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]</p>
  
  <p>Is there any problem with the service or the component?</p>
  
  <p>Backend is an express/node app</p>
  
  <p><strong>player.component.html</strong></p>
  
  <pre><code>&lt;div&gt; {{allPlayers}} &lt;/div&gt;
  </code></pre>
  
  <p><strong>player.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import {AuthService} from '../../services/auth.service';
  import {PlayerService} from '../../services/player.service';
  import {Router} from '@angular/router';
  
  @Component({
    selector: 'app-player',
    templateUrl: './player.component.html',
    styleUrls: ['./player.component.css']
  })
  export class PlayerComponent implements OnInit {
    allPlayers: Array&lt;Object&gt;;
  
  
    constructor(private authService:AuthService,
                private router:Router,
                private playerService: PlayerService) { }
  
    ngOnInit() {
      this.playerService.getAllPlayers().subscribe(allPlayers =&gt; {
        this.allPlayers = allPlayers;
      },
      err =&gt; {
        console.log(err);
        return false;
      });
    }
  }
  </code></pre>
  
  <p><strong>player.service.ts</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import {Http, Headers} from '@angular/http';
  
  @Injectable()
  export class PlayerService {
  
  
    constructor(private http:Http) {
  
   }
  
    getAllPlayers(){
      return this.http.get("http://localhost:8080/player/all")
          .map(res =&gt; res.json());
    }
  }
  </code></pre>