Using Angular2 to assign the response from an http.get request to a class object

Question

Using Angular2 to assign the response from an http.get request to a class object

I am a beginner in Angular and I have a JSON file that holds the configuration URL for my application.

Path: app/config/development.json

{
   "apiUrl": "http://staging.domain.com:9000/",
   "debugging": true
}

Below is the content of my config.service.ts file:

export class ConfigService {
    private apiURL:any;
    constructor (private http: Http) {}

   getApiURL(){
       this.http.get("app/config/development.json").map(res:Response=>res.json())
      .subscribe(data=>{
         this.apiURL = data;

       })

        console.log(this.apiURL);//this returns undefined
   }

}

I am trying to ensure that this.apiURL captures the response from the http.get method. However, even when I create another method, the value of this.apiURL remains unchanged from the getAPIURL() method.

someMethod()
{
   console.log(this.apiURL)//this must contain the response from http.get
}

javascript angular typescript

Answer 1

Answer №1

If you want to implement this functionality, here is an example of how it can be done within your service file.

// Define the model you are working with
getApiURL():Observable<Object[]>{     
  return this.http.get(this.whateverURL)
            .map(res:Response=>res.json())
            .catch((error:any) => Observable.throw(error.json().error || 'Server error'));
}

Next, in your component file:

yourData:Object[];
// Define the Model you are using.
// Assuming yourService is the instance of your service which was set up in the constructor.
this.yourService.getApiURL()
      .subscribe(
          yourData=>{
            this.yourData=yourData;               
          },err=>{
            console.log(err);
            alert("Something went wrong");
          }
      )
}

Answer 2

If you want to implement this functionality, here is an example of how it can be done within your service file.

// Define the model you are working with
getApiURL():Observable<Object[]>{     
  return this.http.get(this.whateverURL)
            .map(res:Response=>res.json())
            .catch((error:any) => Observable.throw(error.json().error || 'Server error'));
}

Next, in your component file:

yourData:Object[];
// Define the Model you are using.
// Assuming yourService is the instance of your service which was set up in the constructor.
this.yourService.getApiURL()
      .subscribe(
          yourData=>{
            this.yourData=yourData;               
          },err=>{
            console.log(err);
            alert("Something went wrong");
          }
      )
}

Using Angular2 to assign the response from an http.get request to a class object

Answer №1

Similar questions

Angular 2: Implementing a Universal CSS Style Sheet

Is there a way to call a Vue function from an onclick event in JavaScript?

Selenium is encountering a maximum call stack size error while attempting to access Highcharts

Tips on revealing TypeScript modules in a NodeJS environment

What is the method of displaying a querystring on my Angular view page without relying on a controller?

What might be causing my observable to fail to return a value?

Tips for gathering an array of checkboxes within a dynamic array of items using Vue.js and Vuetify

Discover the pixel width of a Bootstrap grid row or container using JavaScript

How can a TypeScript function be used to retrieve a string (or JSON object)?

What is the method for generating an observable that includes a time delay?

The log indicates that there are two distinct IP addresses associated with the user

Easy Steps for Mapping Json Data into an Array

Encountering an error with "unexpected token import" while utilizing localize-router in an Angular 4

Authentication is needed when accessing ASP.NET Core 3.1 Angular with Windows. Please provide your username and

What is the reason for the new page rendering from the bottom of the screen in React?

Error message: Unable to locate the 'npm' task in Visual Studio Code

Choose a looping function in React JS that iterates over an array of objects

Acquiring data within a jade template in order to generate static HTML pages

Is there a way to activate a function in one component from another within a Next.js application?

What is the best way to fill HTML tables using an ajax response?