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

Tips for effectively utilizing JavaScript regex to precisely match a string before triggering the submit button

What is the process for saving information to a database with JavaScript?

Issues arise when using PHP4 in conjunction with Ajax, the json_encode function, and

Revamping HTML with AngularJS Directive: Enhancing the Layout with New Angular Attributes

Filtering observables to handle routing in Angular Material Autocomplete is a must-have skill to master

Dealing with multiple POST requests at once in Node Express JS - Best Practices

Is it possible to show one element while hiding others upon clicking using JavaScript?

I noticed that when I include the www in the URL, I am unable to retrieve the API results. However, when I exclude the

After removing an element from an array in Vue.js, how can we adjust its class to reflect the change?

Rendering an Angular page with data using Node.js

choose a value from a dropdown menu to reset other dropdowns to their default values

Searching for a solution on how to retrieve data server-side in the newest version of Next.js? Attempted to use getStaticProps but encountering issues with it not executing

Is there a way to categorize data and sort it by using an action and reducer in redux?

Loading Ajax content into div (Wordpress) without pre-loading the font can cause display issues

"Utilizing react.js allows for the direct access of DOM elements by the main parent component

Does angular have a feature comparable to JavaScript's .querySelectorAll()?

Refresh information periodically within a Node.js application

Making Node.js Wait Until a Function Completes its Execution

Tips for displaying a page within a parent div upon clicking a button in a child div

Attempting to highlight a specific list item by using the CSS current class to emphasize its active state