Angular observable throws error with status code 200 when trying to get multiple images

Viewed 409

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!

1 Answers

updated index.js

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.send({data});
        }
      }
    );
  }
);
Related