HTML table not automatically updating after executing HTTP post - html

Question

I created a dummy website for a 'game library' just to teach myself the http POST, GET, PUT and DELETE methods, I have a separate file for my api with 3 'games' in. The post does work when I enter a new game name and click enter nothing happens but when I refresh the page my html table then displays the first three games plus the one I just posted. I would like to have it post and then display it on the table right away rather than having to refresh the page as its abit sloppy in my opinion.
I have tried putting the input box above the table, but I don't really know what else to try.
<h3>Here is your list of current games in your library</h3>
<table>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
<tr *ngFor="let game of games">
<td>{{game.id}}</td>
<td>{{game.name}}</td>
</tr>
</table>
public games: any = [];
private url = 'http://localhost:3000/api/games';
constructor(private httpClient: HttpClient){
httpClient.get(this.url).subscribe(response => {
this.games = response;
});
}
createGame(name: HTMLInputElement) {
let post = {name : name.value};
name.value = '';
let headers = new HttpHeaders();
headers= headers.set('Content-Type', 'application/json');
this.httpClient.post(this.url, {id: this.games.length + 1,name: post.name }, {headers})
.subscribe(response => {
console.log(response)
})
}
I would like the table to auto update when I post a new game to it.

Answer 1

You have to implements OnInit on your component, see the doc here [https://angular.io/api/core/OnInit]
Your get request should be in the ngOnInit() like this :
ngOnInit(){
httpClient.get(this.url).subscribe(response => {
this.games = response;
});
}
After creating your new data, call ngOnInit() function and
your table will be updated.

Answer 2

You are not retrieving back the changed data. Once the POST call is successful, make a GET call to get the updated data.
createGame(name: HTMLInputElement) {
let post = {name : name.value};
name.value = '';
let headers = new HttpHeaders();
headers= headers.set('Content-Type', 'application/json');
this.httpClient.post(this.url, {id: this.games.length + 1,name: post.name },{headers}).subscribe(response => {
console.log(response)
// Subscribe back the changes
this.httpClient.get(this.url).subscribe(response => {
this.games = response;
});
})
}
Another way is to write another function which uses the GET call to update the data. You can use that one for initially loading the data as well as updating after new game creation.

Answer 3

#sammyleighg try like this,
you can update your games list once you have successfully posting your data, just make another http call to your Server.
create a method to simplified logic.
Component.ts
public games: any = [];
private url = 'http://localhost:3000/api/games';
constructor(private httpClient: HttpClient){
this.getGamesInfo();
}
getGamesInfo() {
this.httpClient.get(this.url).subscribe(response => {
this.games = response;
});
}
createGame(name: HTMLInputElement) {
let post = {name : name.value};
name.value = '';
let headers = new HttpHeaders();
headers= headers.set('Content-Type', 'application/json');
this.httpClient.post(this.url, {id: this.games.length + 1,name: post.name }, {headers})
.subscribe((response: any) => {
if(response.status == 200) {
this.getGamesInfo();
}
})
}
I will recommend to use ngOnInit() for making Api calls rather than in constructor()

Answer 4

You have to add newly created game to games array inside createGame method:
this.games.push({id: this.games.length + 1,name: post.name });
For PUT method you need to find edited item in array and then change its data:
let editedGame = this.games.find(game => game.id === UserInputId);
editedGame.name = UserInputName;