'Node JS Backend Not Displaying Result on the Frontend of Angular
I have a project that is using Node JS as the backend communication to the Angular Frontend. I have buttons on the angular frontend for the 4 API Actions (Get, Post, Put, Delete). My backend is successfully calling my external API, executing one of the 4 API Actions when the corresponding button is clicked, and printing the results in the console. However, the results are not showing up on the angular frontend. Is there anything I need to check for to see why this is not working? I am not sure where to start with it.
HTML Code:
<form #documentNum="ngForm" (ngSubmit)="getDoc(documentNum.value)">
<div class="input-group mb-3 spacing">
<input type="text" value="" placeholder="Document Number" aria-label="Recipient's username"
aria-describedby="basic-addon2" id="getDoc" name="getDoc" ngModel>
<div class="input-group-append">
<input class="btn btn-info" type="submit" value="GET" id="submit">
<input class="btn btn-success" type="submit" name="_method" value="PUT">
<input class="btn btn-danger" type="submit" name="_method" value="DELETE">
<input class="btn btn-warning y-btn" type="submit" value="POST" id="submit">
</div>
</div>
</form>
TypeScript:
import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
@Component({
selector: 'app-lab5',
templateUrl: './lab5.component.html',
styleUrls: ['./lab5.component.css']
})
export class Lab5Component implements OnInit {
constructor(private http: HttpClient) { }
ROOT_URL = 'http://localhost:3000/'
//constructor(){}
list:any;
ngOnInit(): void {
}
getDoc(data: any) {
this.http.get(this.ROOT_URL + 'db/' + (data.getDoc - 1)).subscribe(res => {
this.list = res;
console.log(this.list);
})
}
}
Node JS (for get verb):
app.get('/db/:number', async function (req, res) {
await client.connect();
const database = client.db("lab5");
const coll = database.collection("players");
var players = coll.find({}).toArray().then(() => {
coll.find({}).toArray(function (err, symbols) {
if (!err) {
var output;
var num = req.params.number;
console.log(num);
var all = symbols[num].data;
res.send(all);
}
// client.close();
});
});
});
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
