Problem description
I'm a having problems with getting multiple images from a postgreSQL database and showing it on my frontend. The images are stored in postgreSQL as binary data. If I run my express code I get the image data as buffer back in json format. When I run the code I receive a 200 status code, but the observable ends up executing the handleError function. Here you can see my console --> console
My goal
I want to get multiple images from a house to show on my frontend modal page, those images are stored in a separate table in the database. With this query ("select * from housee.houses_images where straatnaam = $1 AND straatnr = $2 AND postcode = $3",) in my postgreSQL database I can get the right images. After I get all the images I want to display them in a ion-img tag (from the ionic framework)
Code information
So I am using a postgresSQL database with a backend in javascript using the express.js library and a frontend in Angular.
This is my table in postgreSQL--> table postgreSQL
In my backend index.js file I have this code
app.get(
"/getMarkerPhotos/:straatnaam/:straatnr/:postcode",
function (req, res) {
client.query(
"select * from housee.houses_images where straatnaam = $1 AND straatnr = $2 AND postcode = $3",
[req.params.straatnaam, req.params.straatnr, req.params.postcode],
function (err, data) {
if (err != null) {
res.sendStatus(500);
} else {
res.sendStatus(200);
}
}
);
}
);
The call in the backend is working because if I run it in postman it gives back my data in JSON format --> postman
On to the frontend, in my api.service.ts file I made this function
getMarkerPhotos(straatnaam: any, straatnr: any, postcode: any): Observable<any> {
var result = this.http.get(this.url + '/getMarkerPhotos/' + straatnaam + '/' + straatnr + '/' + postcode)
.pipe(
catchError(this.handleError)
);
console.log(result)
return result
}
<--other code-->
private handleError(error: HttpErrorResponse) {
if (error.error instanceof ErrorEvent) {
console.log(error.error.message)
} else {
console.log(error.status)
}
return throwError(
console.log('Something is wrong!'));
};
Than on my modal page (maker-modal.components.ts) where I want to show the images from the database I have this code
ngOnInit() {
this.getMarkerPhotos();
}
getMarkerPhotos() {
this.api.getMarkerPhotos(this.straatnaam, this.straatnr, this.postcode).subscribe(
data => {
console.log(data)
//this.photos.push(data)
//console.log(this.photos)
},
error => {
console.log("Subscribe error: " + error)
}
);
}
I hope someone can help me with this. Thanks in advance!