Mostly matching endpoints not working the same | Angular Community | Page 1

azure echo Oct 19, 2024, 8:01 AM

#

Not sure if this is the best place to get help, but I've been racking my brain for several days. I was following a tutorial for an angular project from linkedin learning (mostly, with some differences) and when connecting frontend to backend I ran into an issue. However, I've boiled it down to the basic components and I cannot figure out what is wrong. One of my api routes works fine ("getListings") while the other one will not work at all ("getListingById"). I haven't even been able to get to the rest of the routes as I can't get these working. I've gotten to the point where both server calls for the two are exactly the same, but one returns the correct information and the other doesn't return anything. The only difference between the two URLs is that one has an ID parameter, but the code ignores this completely and thus should have the same results. I confirmed all endpoints using curl or just directly accessing the API in the browser, both of which return the correct information from the database. My project is here https://github.com/cisco95/fullstack-shop/tree/debug. Any insight would be amazing as I feel like I am probably missing something simple but I've been working on it for literal days. Thank you in advance!

silk cedar Oct 19, 2024, 7:12 PM

#

If you want help, please be much more specific. Show a minimal piece of code reproducing the issue, tell precisely what you're doing, what you expect to happen, and what happens instead.

azure echo Oct 21, 2024, 4:43 AM

#

Understood, I will try to be as specific as possible as I really do want help. More than a solution I want to understand what is going wrong with what I have, as logically I cannot see where it even has the chance not to work.

In my services file, this is my code:
getListings(): Observable<Listing[]> { return this.http.get<Listing[]>(/api/listings`);
}

getListingById(id: string): Observable<Listing[]> {
return this.http.get<Listing[]>(/api/listings/${id})
}`

My server side code for both endpoints is basically the same. The getListing route uses the id as a parameter and the getAllListingsRoute does not, but they should still function the same. The code for both (getAllListingsRoute differences are shown as the comments) is the following:

#

`import { db } from "../database";

export const getListingRoute = { //export const getAllListingsRoute = {
method: 'GET',
path: '/api/listings/{id}', //path: '/api/listings',
handler: async (request, h) => {
console.log("This has reached the server/DB using getListing") //console.log("This has reached the server/DB using getAllListings")
return new Promise((resolve, reject) => {
db.all("SELECT * FROM listings", [], (err, rows) => {
if (err) {
console.error('Database error:', err.message);
reject(h.response({ error: err.message })
.header('Access-Control-Allow-Origin', 'https://upgraded-space-fortnight-q9qq5gw9479c9q7x-4200.app.github.dev')
.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
.header('Access-Control-Allow-Headers', 'Accept, Content-Type, Authorization')
.code(500));
} else {
console.log('"getListingById" successful:', rows);
resolve(h.response(rows)
.header('Content-Type', 'application/json')
.header('Access-Control-Allow-Origin', 'https://upgraded-space-fortnight-q9qq5gw9479c9q7x-4200.app.github.dev')
.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
.header('Access-Control-Allow-Headers', 'Accept, Content-Type, Authorization')
.code(200));
}
});
}).catch(error => {
console.error('Promise error:', error);
return h.response({ error: 'Internal Server Error' })
//.header's same as above, cut to fit post.
.code(500);
});
}
};`

#

However, I do not believe the issue lies with the server code because hitting the endpoint directly by browser or using curl gets me exactly what I am expecting.

My expectation would be that using the /api/listings/{id} endpoint should return the list of items from the database, the exact same way that it works for the /api/listings endpoint. Currently, it returns an error about the type of the data being returned not being correct. This does not make sense though, as the code is literally the same for both services and server calls. As is, If I change the code to use the services for getListings(), it works and returns the list of listings. But as soon as I call getListingById(id) and pass in the id parameter from the url, it no longer works.

Apologies for not providing enough information in the beginning, hopefully this is enough but if anything further should be added please let me know! Thanks!

silk cedar Oct 21, 2024, 5:29 AM

#

Currently, it returns an error about the type of the data being returned not being correct
Which precise code returns that error, and what is the complete and exact error message / stack trace?

azure echo Oct 21, 2024, 7:53 AM

#

#

text
:
"<!doctype html>\n<html lang="en">\n<head>\n <script type="module" src="/@vite/client"></script>\n\n <meta charset="utf-8">\n <title>BuyAndSell</title>\n <base href="/">\n <meta name="viewport" content="width=device-width, initial-scale=1">\n <link rel="icon" type="image/x-icon" href="favicon.ico">\n<link rel="stylesheet" href="styles.css"></head>\n<body>\n <app-root></app-root>\n<script src="polyfills.js" type="module"></script><script src="main.js" type="module"></script></body>\n</html>\n"
[[Prototype]]
:
Object
headers
:
_HttpHeaders
lazyInit
:
() => {…}
lazyUpdate
:
null
normalizedNames
:
Map(0) {size: 0}
[[Prototype]]
:
Object
message
:
"Http failure during parsing for https://upgraded-space-fortnight-q9qq5gw9479c9q7x-4200.app.github.dev/api/listings/124"
name
:
"HttpErrorResponse"
ok
:
false
status
:
200
statusText
:
"OK"
url
:
"https://upgraded-space-fortnight-q9qq5gw9479c9q7x-4200.app.github.dev/api/listings/124"
[[Prototype]]
:
HttpResponseBase
constructor
:
class extends
[[Prototype]]
:
Object
Zone - XMLHttpRequest.addEventListener:load (async)
ngOnInit @ listing-detail-page.component.ts:44
Promise.then (async)
(anonymous) @ main.ts:5
Show 175 more frames

#

silk cedar Oct 21, 2024, 8:48 AM

#

This error means that the server sends back HTML instead of sending back JSON. If the URL you're using (https://upgraded-space-fortnight-q9qq5gw9479c9q7x-4200.app.github.dev/api/listings/124) is correct, then it's a server issue. But maybe the server is not the correct one.

#Mostly matching endpoints not working the same