# \[SOLVED\] Problem with accessing object properties

**URL:** <https://forum.codewithmosh.com/t/solved-problem-with-accessing-object-properties/16138>\
**Category:** JavaScript\
**Created:** [October 28, 2022, 8:09pm UTC](https://forum.codewithmosh.com/t/solved-problem-with-accessing-object-properties/16138 "2022-10-28T20:09:33Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![UniqueNospaceShort](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/uniquenospaceshort/32/1814_2.png) [@UniqueNospaceShort](https://forum.codewithmosh.com/u/UniqueNospaceShort)\
**Post date:** [October 28, 2022, 8:09pm UTC](https://forum.codewithmosh.com/t/solved-problem-with-accessing-object-properties/16138/1 "2022-10-28T20:09:33Z")

</div>

Hi,  
I am going through an Angular project and I am meeting a problem I do not understand.  
Basically I use the JSON Placeholder API to send a post on POST request.  
My service indeed returns a response and I can log it successfully in the console.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/codewithmosh/original/2X/f/f87d8cce15c0d5f19643d1a1a92238436e0a4c08.png)

The problem begins when I try to display any property from the response body.  
It works on `type`. This is the only attribute VS Code finds.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/codewithmosh/original/2X/d/d930d8c161c6fa2ff7142b50e80f234c06332730.png)

Now I need to access status or headers/body content but it simply does not allow that. I do not understand what I would be doing wrong.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/codewithmosh/original/2X/c/caad78b5310bb24c3ec3495c508c68feb553e0f3.png)

Here is the code for my service.

```auto
  httpPostOptions: any = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json'
    }
    ),
    observe: 'response'
  };
// Some more code
  sendPostWithResponse(post: IPost): Observable<HttpEvent<HttpResponse<IPost>>> {
    return this.http.post<HttpResponse<IPost>>(this.completeUrl, post, this.httpPostOptions);
  }

```

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![UniqueNospaceShort](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/uniquenospaceshort/32/1814_2.png) [@UniqueNospaceShort](https://forum.codewithmosh.com/u/UniqueNospaceShort)\
**Post date:** [October 30, 2022, 9:03am UTC](https://forum.codewithmosh.com/t/solved-problem-with-accessing-object-properties/16138/2 "2022-10-30T09:03:21Z")

</div>

A temporary solution is to change the return type in my service to `any`.  
It works but I wish to strongly type my return value and understand why it doesn’t the way I do.

```auto
sendPostWithResponseAny(post: IPost): Observable<any> {
   return this.http.post<HttpResponse<IPost>>(this.completeUrl, post, this.httpPostOptions);
}

```

---

<div class="post-metadata">

**Author:** ![UniqueNospaceShort](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/uniquenospaceshort/32/1814_2.png) [@UniqueNospaceShort](https://forum.codewithmosh.com/u/UniqueNospaceShort)\
**Post date:** [October 30, 2022, 12:16pm UTC](https://forum.codewithmosh.com/t/solved-problem-with-accessing-object-properties/16138/3 "2022-10-30T12:16:28Z")

</div>

OK I solved the problem myself.

The thing is the type I got came from I returned an `HttpEvent` type which only has a `type` property. The value 4 means it is an `HttpResponse`.

Though we can’t see it in the console, it went through other event types in the process. Eventually, it resolves to a response.

> Watching events is the way to go should we need to track long processes (such as file upload). I didn’t do it myself but it seems there is a boolean `reportProgress` property to add in the `HttpOptions` to track progress. I don’t need that here.

The properties become available if we precise the type of event within the method body.

In further codes, the `httpOptions` have been changed to observe events

```auto
  httpPostOptions: any = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json'
    }
    ),
    observe: 'events'
  };

```

There are 2 ways I did solve this.

**1st way**

> Service

I wrap the return type into `HttpResponse` amongst others.

```auto
sendPostWithResponse(post: IPost): Observable<HttpEvent<HttpResponse<IPost>>> {
    return this.http.post<HttpResponse<IPost>>(this.completeUrl, post, this.httpPostOptions);
}

```

> Controller

I need to cast to unknow and IPost for it to compile.

```auto
    this.postService.sendPostWithResponse(data).subscribe({
      next: (v) => {
        if (v.type === HttpEventType.Response) {
          let thisPost: IPost = v.body as unknown as IPost;

          let dataMsg = "Id: " + thisPost.id + "\n";
          dataMsg += "User Id: " + thisPost.userId + "\n";
          dataMsg += "Title: " + thisPost.title + "\n";
          dataMsg += "Body: " + thisPost.body + "\n";
          console.log("DATA SENT\n" + dataMsg)
          console.log(v);
          console.log(v.body)
        }
      },
      error: (e) => { console.log(e) },
      complete: () => { console.log('COMPLETE') },
    });
  }

```

**2nd way** _preferred option IMHO_

> Service

I do not wrap my return type in `HttpResponse`. `HttpEvent` eventually returns the response

```auto
sendPostWithResponse(post: IPost): Observable<HttpEvent<IPost>> {
    return this.http.post<IPost>(this.completeUrl, post, this.httpPostOptions);
}

```

> Controller

IMHO the code looks cleaner and I do not need a prior cast to `unknown`.

```auto
    this.postService.sendPostWithResponse(data).subscribe({
      next: (v) => {
        if (v.type === HttpEventType.Response) {
          let thisPost: IPost = v.body as IPost;

          let dataMsg = "Id: " + thisPost.id + "\n";
          dataMsg += "User Id: " + thisPost.userId + "\n";
          dataMsg += "Title: " + thisPost.title + "\n";
          dataMsg += "Body: " + thisPost.body + "\n";
          console.log("DATA SENT\n" + dataMsg)
          console.log(v);
          console.log(v.body)
        }
      },
      error: (e) => { console.log(e) },
      complete: () => { console.log('COMPLETE') },
    });
  }

```