Ytukyg

On my mean stack project I am trying to display the contents within my database onto a table on my html page.

Here is a sample record from my database i made on mlab:

{

    "_id": {

        "$oid": "5befa2ad59ef330bc8568373"

    },

    "player": "loco",

    "rank": 1,

    "score": 200,

    "time": "1d 2hrs",

    "gamesPlayed": "League",

    "status": "online",

    "__v": 0

}

This information should be displayed in my table like this:

Player.component.html:

<tr>

<td>Player</td>

<td>Rank</td>

<td>Score</td>

<td>Time</td>

<td>Games Played</td>

<td>Status</td>

</tr>

<tr>

<td>{{player.name}}</td>

<td>{{player.rank}}</td>

<td>{{player.score}}</td>

<td>{{player.time}}</td>

<td>{{player.gamesPlayed}}</td>

<td>{{player.status}}</td>

</tr>                          //For each player create new row on table displaying player info

Im unable to figure out how to display player info for every player i have on my database.

-

-
The work i have done so far is this:

I created a service file player.service.ts

On this file im getting an error that says:
Argument of type '(response: import("myapp/node_modules/@angular/http/src/static_response").Response) => any' is not assignable to parameter of type '(response: Response) => any'.

import { Injectable } from '@angular/core';

import { Http, Response } from '@angular/http';

import 'rxjs/add/operator/map';



@Injectable({

  providedIn: 'root'

})

export class PlayerService {



  private _getUrl = "/api/players";



  constructor(private _http: Http) { }  //instance of http to make requests



  getPlayers()

  {

    return this._http.get(this._getUrl)           //call get method passing the url and fetch all players

    .map((response: Response)=> response.json());  //response is mapped to json

  }

}

-

-
On my player.component.ts file everything is running smoothly:

import { Component, OnInit } from '@angular/core';

import { Player } from '../player';

import { PlayerService } from '../player.service';



@Component({

  selector: 'app-player-center',

  templateUrl: './player-center.component.html',

  styleUrls: ['./player-center.component.css'],

  providers: [PlayerService]

})

export class PlayerCenterComponent implements OnInit {



  players: Array<Player>; //players is array of type player



  selectedPlayer: Player;



  constructor(private _playerService: PlayerService) { }  //dependancy injection to get playerservice



  ngOnInit() 

  {

    this._playerService.getPlayers()

    .subscribe(resPlayerData => this.players = resPlayerData);

  }



  onSelectPlayer(player:any)

  {

    this.selectedPlayer = player;

    console.log(this.selectedPlayer);

  }



}

Any ideas on what is causing the error on player.service.ts??
And some help on how I can get all my players into the table on my html page would be great! Thanks

On first case you are using a deprecated version of http if in case you upgrade your angular you need to use HttpClient from @angular/common/http for more details check this link

Finally there is no need of mentioning the response type you can directly convert it as json() as my thought

getPlayers()

{

  return this._http.get(this._getUrl)           

    .map((response)=> response.json()); 

}

This will be fine to work your code - hope this helps you - happy coding :)

Update:

For rxjs 6+ you need to use the operators in different manner

import { map, pipe } from 'rxjs/operators' first change in import statement

getPlayers() : Observable<Players>

    {

      return this._http.get(this._getUrl)

       .pipe(map((response)=> response.data)); 

    }

Try something like this for more info check this - hope it helps :)

You need to import HttpClientModule In app.module to resolve the Error 'NullInjectorError: No provider for Http!'

export class AppModule {

   imports: [

     HttpClientModule

   ]

}

You could try your service like : (you dont need to parse to json)

getPlayers(): Observable<any> {

    return this._http.get(this._getUrl);

}

Then, in your template :

  <tr *ngFor="let player of players">

    <td>{{player.name}}</td>

    <td>{{player.rank}}</td>

    <td>{{player.score}}</td>

    <td>{{player.time}}</td>

    <td>{{player.gamesPlayed}}</td>

    <td>{{player.status}}</td>

 </tr>

Hope this helps!