Ways to verify the response status in component.ts before triggering another service in Angular 5

Question

Ways to verify the response status in component.ts before triggering another service in Angular 5

Currently, I am retrieving the status code in my service using the following code snippet:

add(new: Add): Observable<Response> {
  return this.http
   .post(this.addURL, new , httpOptions)
     .map((response: Response) => {
      if (response) {
       if (response.status === 200) {
        return [{ status: response.status, response: <Response>response.json() }]
                }
            }
        })
        .catch(this.handleError);
}

In my component.ts file, I am attempting to trigger a list update after successfully adding a new item. Below is the relevant section of my code:

  addDetails(): void {
var new = this.form.value.array;
new = JSON.stringify(this.form.value.array);
this.addService.add(new)
  .subscribe(
  resultArray => this.Response = resultArray,
  error => console.log("Error :: " + error),    
  )
  if(Response.status ===200){
    this.getList();   
  }}

However, I encounter the following error message: Property 'status' does not exist on type 'typeof Response'

angular typescript angular5

Answer 1

Answer №1

Consider returning an Object instead of an Array:

return { status: response.status, response: <Response>response.json() }

If you need to access items in an Array, remember to use the index of the item. For example, when retrieving the status code, make sure to do this inside the subscribe method:

this.addService.add(_new)
  .subscribe(
  resultArray => {
    this.Response = resultArray
    if(resultArray[0].status === 200){
      this.getList();   
    }
  },
  error => console.log("Error :: " + error))

Remember: The subscribe method is asynchronous. You cannot access the returned response outside of it.

Answer 2

Consider returning an Object instead of an Array:

return { status: response.status, response: <Response>response.json() }

If you need to access items in an Array, remember to use the index of the item. For example, when retrieving the status code, make sure to do this inside the subscribe method:

this.addService.add(_new)
  .subscribe(
  resultArray => {
    this.Response = resultArray
    if(resultArray[0].status === 200){
      this.getList();   
    }
  },
  error => console.log("Error :: " + error))

Remember: The subscribe method is asynchronous. You cannot access the returned response outside of it.

Answer 3

Answer №2

Make sure to access the status from the actual Response CLASS, not just any instance of it. Pay attention to the uppercase letters in your code and focus on the typeof Response section for potential errors.

It seems like

if (resultArray[0].status === 200)

should do the trick, although I'm a bit puzzled as to why you're dealing with an array in this context. It might be cleaner to simplify it with something like if (result.status === 200)

Answer 4

Make sure to access the status from the actual Response CLASS, not just any instance of it. Pay attention to the uppercase letters in your code and focus on the typeof Response section for potential errors.

It seems like

if (resultArray[0].status === 200)

should do the trick, although I'm a bit puzzled as to why you're dealing with an array in this context. It might be cleaner to simplify it with something like if (result.status === 200)

Ways to verify the response status in component.ts before triggering another service in Angular 5

Answer №1

Answer №2

Similar questions

Azure - deploy a virtual machine and assign an IP address programmatically

Encountering a Problem on Heroku: TypeScript Compilation Error with GraphQL Files - TS2307 Error: Module 'graphql' Not Found or Its Type Declarations Missing

Tips for integrating an arrow function as a property in a functional programming approach using JavaScript or TypeScript

Rollup does not allow the use of self-written component imports in a component library

The statistics for Firebase usage appear to be exaggerated, leaving me curious about the reasons behind the significant increase in reads, sometimes reaching over 70

Sending Angular forms to various endpoints

Include a property with a visualizer by employing a command

Is it possible for me to simply return a finally statement from a function that promises a return value?

Implementing ExpressJS functionality within a TypeScript class

Transferring the input element's binding value to the model using ngModel

"I am looking for a way to retrieve dynamic data from a (click) event in Angular. Can

What causes TypeScript to malfunction when using spread in components?

The function is not properly defined for the provided service

Comparing Javascript's GroupBy function to the LINQ GroupBy in C#

Enhancing Apollo Cache Updates using TypeScript null checks

What steps can I take to correct my code so that it only shows a single table?

Is there anyone who can assist in resolving this issue? I've already added the vendor.js file to Index.html

What steps should I take to fix the routing problems in this Ionic app through an update?

Retrieve information from the local storage every second

Reactify TypeScript: Accurate typings for onChange event