Assign multiple values from subscribe object

Question

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__: , …}

Why are all of those assignments one logical line? Also, where (and when) are you seeing those values as undefined? — jonrsharpe
– jonrsharpe, Commented Oct 14, 2018 at 13:17
The page loads up some players. Then you can select some players and click a button "Optimize". On that button click onClickOptimize is run. EDIT: It is when I click Optimize and the POST response comes back that I see the lineupreturned populated but the variables I'm assigning remain undefined. As to why they're in one logical line, I suppose no good reason other than I was trying to debug why I haven't been able to bind anything from the subscription result. Plus I need to bind the players in the Lineup object to a MatTableDataSource and not leave it as a player list. — Sean
– Sean, Commented Oct 14, 2018 at 13:18
I'm bad at typescript I guess? I have changed those to semi-colons and it did not change anything. I suspect from the first question asked that I'm trying to do something with data that does not exist yet? I have read many SO posts on this but the fact that console.log shows data in the lineupreturned but I cannot seem to get it assigned to any other variables is what I can't figure out. — Sean
– Sean, Commented Oct 14, 2018 at 13:31
Please add the sample of lineupreturned that you're getting from your API. — SiddAjmera
– SiddAjmera, Commented Oct 14, 2018 at 13:34

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

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.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 14, 2018 at 13:33

SiddAjmera

39.6k7 gold badges77 silver badges113 bronze badges

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

2 Comments

Sean Over a year ago

Thank you for your answer. I have removed the stringify. I also removed the MatTableDataSource entirely just to see if that made a different. It did not. For instance if I do this.salary = lineupreturned.salary, this.salary remains undefined. However console.log(lineupreturned) below it returns a fully populated object... This is driving me nuts. :-)

SiddAjmera Over a year ago

I've updated my answer. Please check. TL;DR; lineupreturned is an Array with just a single Object. This Object will have things like fantasypoints, players, and salary

Collectives™ on Stack Overflow

Assign multiple values from subscribe object

1 Answer 1

UPDATE

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

UPDATE

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related