0

I’ve been trying to map a HTTP response (from my REST API, that are returning a JSON) into a custom model that i made in my Angular project. First i call this function to get the results from my rest API, casting it as a DHEntity (it's my model)

  getProjectData(idDH): Observable<DHEntity>{
    return this.http.get<DHEntity>(`${environment.apiUrl}/dh/${idDH}`, {observe: 'response'})
      .pipe(map(data => data.body));
  }

The json i get from the call (so the body of my response) is correct. Then, i call another method to process the information

getData(): void {
     const idDH = +this.route.snapshot.paramMap.get('idDH');
     if (idDH){
      this.dh1Service.getProjectData(idDH).pipe( map(
        res => {this.DHlist = res}
      ));
    }

I've also tried as suggested to subscribe directly, since the model is identical to my endpoint results

getData(): void {
         const idDH = +this.route.snapshot.paramMap.get('idDH');
         if (idDH){
          this.dh1Service.getProjectData(idDH).subscribe(
            res => {this.DHlist = res});
        }

In addition to those two, I've tried also several other ways (including the use of "new" statement, with a defined constructor) trying to return a correct entity: none of them is working. Everytime i get an undefined value, no matter what i do. Seems like Angular is not able to cast to the specific type. My model is made through several classes as follows (i omit constructors for brevity reasons):

export class DHEntity{
  idDH: number;
  dhinfo: DHInfo;
  dhdata: DHData[];
}

export class DHInfo {
  name: string;
  targetYear: number;
  description: string;
  decisions: DHDecisionDefinition[];
}

export class DHData {
  dec1: number;
  dec2: number;
  eval: number;
}

export class DHDecisionDefinition {
  id: number;
  description: string;
  targetY1: string;
  targetY2: string;
  targetY3: string;
  comments: string;
}

Is there a reason why i cannot map the values correctly? What am i doing wrong? Here one example of the JSON i get from my endpoint: Link

1
  • Have you placed breakpoints on your .map functions to verify that the shape of the data is as expected?. Also keep in mind that you are running those requests asynchronously, so even if everything is working as intended, this.DHList will not be set to a defined value until some indeterminate time in the future after having called getData.
    – Myk Willis
    Apr 22, 2020 at 15:38

2 Answers 2

1

I'm not sure how or where this.DHlist is used so perhaps it isn't available yet as the request is still pending. Or perhaps you need a return due to the braces used when assigning it a value. From res => {this.DHlist = res} to res => {return this.DHlist = res}, or if it's a single statement then res => this.DHlist = res.

Using subscribe() in the getData() method is the right choice. This shouldn't be an issue with the model you are using.

I've made a stackblitz demo using the same names as your question, along with another http example, see it here. Maybe fork that example if you want to demonstrate your issue further and I might be able to assist more.

3
  • Thank you for your reply: basically my ngOnInit is calling the getData() function, which contains the call to my backend API. So when i start the module and there's the ID on my URL path, i send a request to a specific API and i should return the object. I don't know if there's a specific reason why i get this error. I will try to include a delay like you did and to follow your stackblitz example. Also, my variable is declare as DHlist: DHEntity, but even changing it doesn't give a different result I'll try to replicate it on stackblitz to see what i'm doing wrong
    – Mastarius
    Apr 22, 2020 at 17:16
  • Apparently it's as you said: i was trying to retrieve and print those values before the request was ready, and so that i could show them over my page. Using two way data binding i was able to retrieve them correctly without further hassle
    – Mastarius
    Apr 22, 2020 at 17:36
  • Depending on your situation you could use a subject, so DHlist = new BehaviorSubject<DHUser>({ uid: '123' }), giving you an initial value to work with. Or *ngIf in the template if appropriate.
    – Ash
    Apr 23, 2020 at 0:03
1

The .pipe(map()) construct does not subscribe to the Observable, it just installs a mapping function for returned values.

So you need to .subscribe to the Observable returned from getProjectData, else the HTTP request will never be made.

getData(): void {
     const idDH = +this.route.snapshot.paramMap.get('idDH');
     if (idDH){
      this.dh1Service.getProjectData(idDH).subscribe(
        res => {this.DHlist = res}
      );
    }

If you continue to have problems, I suggest judicious use of breakpoints on the map functions etc to verify data shapes are as expected.

1
  • Thanks for your reply: apparently at the time i was calling the methods, the request was not completed yet. That was the reason why i couldn't retrieve data correctly.
    – Mastarius
    Apr 22, 2020 at 17:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.