Converting an HTTP request and incorporating a success function in Typescript and Angular2

Question

Converting an HTTP request and incorporating a success function in Typescript and Angular2

I am working on a http request:

private getValues() {
  this._watchlistElements.map(v =>
    this.http.get('http://localhost/getValue/' + v.xid)
      .subscribe(res => {
        this._values.push(res.json());
    }));
};

When the request is successful, I want to simplify it into one line of code:

this.vars.map((v,i) => v.push(this._values[i].value));

My query is how can I achieve something similar to .success: function(){} in normal ajax with my current code?

Any assistance will be appreciated.

UPDATE

private getValues() {
  this._watchlistElements.map(v =>
    this.http.get('http://localhost/getValue/' + v.xid)
      .subscribe(res => {
        this._values.push(res.json());
      })).then(console.log());
};

When attempting to use the then method in Angular2, an error occurs. Can anyone advise me on which component I need to import for it to work properly?

javascript http angular asynchronous typescript

Answer 1

Answer №1

Utilizing observables, the http function is capable of performing actions in the following manner:

 private fetchValues() {
      this._watchlistElements.map(value =>
        this.http.get('http://localhost/getValue/' + value.xid).map(response=>response.json())
          .subscribe(response => {
           //success
          },
         error=>{
             //error handling
          });
      }

In case you prefer promises exclusively,

private fetchValues() {
  this._watchlistElements.map(value =>
    this.http.get('http://localhost/getValue/' + value.xid)
      .toPromise()
      .then(response=>{response.json()}).catch(handleError);
};

Answer 2

Utilizing observables, the http function is capable of performing actions in the following manner:

 private fetchValues() {
      this._watchlistElements.map(value =>
        this.http.get('http://localhost/getValue/' + value.xid).map(response=>response.json())
          .subscribe(response => {
           //success
          },
         error=>{
             //error handling
          });
      }

In case you prefer promises exclusively,

private fetchValues() {
  this._watchlistElements.map(value =>
    this.http.get('http://localhost/getValue/' + value.xid)
      .toPromise()
      .then(response=>{response.json()}).catch(handleError);
};

Converting an HTTP request and incorporating a success function in Typescript and Angular2

Answer №1

Similar questions

Ways to determine if a dynamically generated script tag has been successfully executed

Utilizing the Map Function for Monitoring Multiple Items

Keeping an HTML field constantly refreshed with dynamic content from Django

Utilizing the adapter design pattern in Angular with TypeScript for enhancing a reactive form implementation

Overlapping Divs - HTML Elements Crossing Paths

What is the best way to pass a variable to the chrome.tab.create function?

AngularJs monitoring changes in service

What is the best way to include a div element with a dynamic animation on a webpage?

React.JS Tip: Automatically Make Alerts Disappear in 2 Seconds!

Error in VueJS/Typescript: Module 'my-module' or its type declarations are not found

Creating a customized TextField look with styled-components and Material-UI's withStyles feature

How can the printing of content be adjusted when the browser zoom function is activated?

Enhancing AngularJS view rendering using ngshow

What could be the reason for my function not being executed in this particular scenario with my calculator HTML code?

What is the process by which React loads and runs JSX content?

Best type for an array of dictionaries

Is there a way to verify DNSSEC compatibility using node.js code?

Using the <Field> component in Vee-validate ensures that your form will always be valid when submitted

avoid saving views in Angular.js

Uploading files using Ajax