Angular 2 Service returns object object

Question

thank you for your time in advance, I'm trying to display a collection I pulled from a local mongodb collection. http://localhost:8080/player/all 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:

[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]

Is there any problem with the service or the component?

Backend is an express/node app

player.component.html

<div> {{allPlayers}} </div>

player.component.ts

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<Object>;


  constructor(private authService:AuthService,
              private router:Router,
              private playerService: PlayerService) { }

  ngOnInit() {
    this.playerService.getAllPlayers().subscribe(allPlayers => {
      this.allPlayers = allPlayers;
    },
    err => {
      console.log(err);
      return false;
    });
  }
}

player.service.ts

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 => res.json());
  }
}

srinivassree · Accepted Answer · 2018-08-10 07:46:55Z

4

use angular pipe

{{allPlayers| json}}

answered Aug 10, 2018 at 7:46

srinivassree

1291 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2021-12-08 22:38:18Z

3

The variable holds a list of objects. You are binding the object/array in the UI so it's saying [Object Object] as its string representation

To get all the values you can use *ngFor and get individual value and show.

<ul>  
  <li *ngFor="#player of allPlayers">
    {{ player.name }} is {{ player.age }}.
  </li>
</ul>

Or as @saneetharan suggested you can bind individual properties of the objects in side array by there index values.

edited Dec 8, 2021 at 22:38

CommunityBot

11 silver badge

answered Mar 28, 2017 at 20:09

Aniruddha Das

21.8k27 gold badges105 silver badges135 bronze badges

Comments

Sajeetharan · Accepted Answer · 2017-03-28 20:06:22Z

2

You need to access the properties using dot operator when you are displaying inside the template, or use ngFor if its an array.

 <div *ngFor="let player of allPlayers">
  {{player.firstName}}
 </div>

edited Mar 28, 2017 at 20:06

answered Mar 28, 2017 at 19:53

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

5 Comments

MFKGER Over a year ago

Thank you. ngFor also returns [object Object]. I want to display the array with the objects just like the API returns it.

Sajeetharan Over a year ago

can you post what is the data you are getting in

MFKGER Over a year ago

[{"_id":"58d309f396c356946e700044","firstName":"LeBron","lastName":"James","overall":96,"position":"SF","salary":25,"duration":1,"notes":"Birdrechte","yearsInTeam":10,"team":"TOR","lastTeam":"","birthYear":1984,"age":32}]

this would be the first object. there are over 500.

Sajeetharan Over a year ago

did the answer help?

MFKGER Over a year ago

Yes thank you. So I have to stringify the object if I want the whole one?

Collectives™ on Stack Overflow

Angular 2 Service returns object object

3 Answers 3

Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related