CODEWITHSUNDEEP
angulartypescriptangular6
Sean
Sean

Reputation: 99

Assign multiple values from subscribe object

I have an object with two simple numbers and then a list of objects:

export class Lineup {
  players: Player[];
  fantasypoints: number;
  salary: number;

  constructor(values: Object = {}) {
    Object.assign(this, values);
  }
}

I hit a service to populate it with a post (I add in some players and get back a lineup from it:

public postLineup(players): Observable < Lineup > {
  return this.http.post <Lineup>(`${API_URL}/optimize`, JSON.stringify(players));
}

This POST returns the data fine and as far as I can tell it will correctly populate the JSON into the Lineup object.

However in my app.component when I try to assign these values into component variables so I can actually use the data. I can't seem to get the assignments to work.

onClickOptimize() {
  this.apiService.postLineup(this.playerSource.data)
    .subscribe(lineupreturned => {
      this.lineupSource = new MatTableDataSource(lineupreturned.players);
      this.salary = lineupreturned.salary;
      this.fantasypoints = lineupreturned.fantasypoints;
      this.displaylineup = true;
      console.log("component output:"), console.log(lineupreturned);
    });
}

The console.log of lineupreturned actually shows an object and it is populated. However, if you were to log this.salary or any other variable it comes back as undefined. I cannot for the life of me understand why none of these variables are getting populated.

EDIT: with lineupreturned variable result from console.log:

null: Array(1) [Object]
length: 1
__proto__: Array(0) [, …]
0: Object {fantasypoints: 324.15, players: Array(8), salary: 48800}
fantasypoints: 324.15
players: Array(8) [Object, Object, Object, …]
length: 8
__proto__: Array(0) [, …]
0: Object {_max_exposure: null, _projected_ownership: null, first_name: "Ray", …}
1: Object {_max_exposure: null, _projected_ownership: null, first_name: "Clearlove", …}
2: Object {_max_exposure: null, _projected_ownership: null, first_name: "Scout", …}
3: Object {_max_exposure: null, _projected_ownership: null, first_name: "Hope", …}
4: Object {_max_exposure: null, _projected_ownership: null, first_name: "Meiko", …}
5: Object {_max_exposure: null, _projected_ownership: null, first_name: "SnowFlower", …}
6: Object {_max_exposure: null, _projected_ownership: null, first_name: "Arce", …}
7: Object {_max_exposure: null, _projected_ownership: null, first_name: "Infinity eSports", …}
salary: 48800
__proto__: Object {constructor: , __defineGetter__: , __defineSetter__: , …}

Upvotes: 0

Views: 1677

Answers (1)

SiddAjmera
SiddAjmera

Reputation: 39432

A few issues I noticed:

Here you're doing JSON.stringify(players) which isn't really required.

public postLineup(players): Observable < Lineup > {
  return this.http.post <Lineup>(`${API_URL}/optimize`, JSON.stringify(players));
}

So this should have been:

public postLineup(players): Observable < Lineup > {
  return this.http.post <Lineup>(`${API_URL}/optimize`, players);
}

Another thing is,

onClickOptimize() {
  this.apiService.postLineup(this.playerSource.data)
    .subscribe(lineupreturned => {
      const actualResponse = lineupreturned[0];
      this.lineupSource = new MatTableDataSource(actualResponse.players);
      this.salary = actualResponse.salary;
      this.fantasypoints = actualResponse.fantasypoints;
      this.displaylineup = true;
      console.log("component output:"), console.log(lineupreturned);
    });
}

Here, you're using new MatTableDataSource(lineupreturned.players) which might have thrown an error.

So you might want to place a breakpoint over there to see the actual value of lineupreturned and also check on the console for any errors.

UPDATE

From your console.log output, looks like the actual response is an array with just one object inside it. This object will contain things like fantasypoints, players, and salary.

So change your subscribe code as I've updated.

Upvotes: 1

Related Questions