Angular RxJs TypeError "undefined" - node.js

Question

Sorry if this question doesn't make sense, I'm very new to the MEAN stack. I have been trying to get an array from an express middleware to display on an angular frontend. The problem I have been having is even though everything compiles and appears to work I get an error in the console saying "ERROR TypeError: 'this.brackets is undefined'".
This is the code that appears to be the problem
'''
import { Injectable } from "#angular/core";
import { Bracket } from './bracket.model';
import { Subject } from 'rxjs';
import { HttpClient } from '#angular/common/http';
#Injectable({providedIn: 'root'})
private brackets: Bracket[] = [];
private bracketsUpdated = new Subject<Bracket[]>();
constructor(private http: HttpClient) {}
getBracket() {
this.http.get<{message: string, brackets: Bracket[]}>('http://localhost:3000/api/brackets')
.subscribe((bracketData) => {
this.brackets = bracketData.brackets;
this.bracketsUpdated.next([...this.brackets]); // this is the problem line
});
console.log(this.brackets);
}
'''
and this is where the array is coming from
'''
app.use("/api/brackets", (req, res, next)=>{
const bracket= [
{
id: 'alksdfjalskj',
bracketTitle:'bracket from node',
bracketBuyIn: "2",
bracketPlayer1:'name',
bracketPlayer2:'name2',
bracketPlayer3:'name3',
bracketPlayer4:'name4',
bracketPlayer5:'name5',
bracketPlayer6:'name6',
bracketPlayer7:'name7',
bracketPlayer8:'name8'
}
];
console.log(bracket);
res.status(200).json({
message:'Bracket from node',
bracket:bracket
});
});
'''
In vs code it is defined so I'm confused as to why it doesn't work.
EDIT: the bracket referred to is not a naming error. It's referring to an imported model called Bracket

Answer 1

There is a naming error, you have
res.status(200).json({
message:'Bracket from node',
bracket:bracket
});
calling bracket
and in Angular you are using by plural
this.brackets = bracketData.brackets;
bracket(s)
leave either bracket, or brackets and it will work fine

Answer 2

The model you're using in the front-end has nothing to do with the value you receive from the back-end. The model is only there to assert the type of the data you're trying to assign to the variable.
But if you see in the backend
res.status(200).json({
message:'Bracket from node',
bracket:bracket
});
You're clearly assigning the object to a property called bracket, NOT brackets. To be extra sure, the value you receive from the backend is this
{
message:'Bracket from node',
bracket: [{
id: 'alksdfjalskj',
bracketTitle:'bracket from node',
bracketBuyIn: "2",
bracketPlayer1:'name',
bracketPlayer2:'name2',
bracketPlayer3:'name3',
bracketPlayer4:'name4',
bracketPlayer5:'name5',
bracketPlayer6:'name6',
bracketPlayer7:'name7',
bracketPlayer8:'name8'
}]
}
So it's called bracket WITHOUT a s.
Now the front-end part.
this.brackets = bracketData.brackets;
Here the LHS this.brackets for sure abides 100% by the model you've defined. It doesn't jump over any hoops to assign any values that doesn't conform to the model Bracket you've defined. But the RHS bracketData.brackets doesn't care a single percent about your model. It doesn't have to. It comes from the backend, and that's the only thing it abides to.
If you do a console.log(bracketData), you'll see the following
{
message:'Bracket from node',
bracket: [{
id: 'alksdfjalskj',
bracketTitle:'bracket from node',
bracketBuyIn: "2",
bracketPlayer1:'name',
bracketPlayer2:'name2',
bracketPlayer3:'name3',
bracketPlayer4:'name4',
bracketPlayer5:'name5',
bracketPlayer6:'name6',
bracketPlayer7:'name7',
bracketPlayer8:'name8'
}]
}
Now, please take a look again closely. You will never be able to find brackets property. Because you call it bracket in the backend.
So when you try bracketData.brackets there is no data in that property. It might as well be bracketData.magicData for all Javascript cares. It WILL return undefined for undefined properties.