Listen for changes with the subscribe method in an HTTP GET request

Having some difficulty with 'MyAddressConfig' returning a string in my http.get request. This function retrieves data from Ionic2 Storage, but I keep receiving

GET http://localhost:0000/[object%20Object]my/path?&tst=1 404 (Not Found)

Any suggestions on what might be causing this issue? -thanks

MyAddressConfig

GetDataFromStorage: Observable<any> =

Observable.fromPromise(
    Promise.all([
        this.ionicStorage_.get('MyRestIPAddress'), // 'localhost'
        this.ionicStorage_.get('MyRestIPPort'), // '0000'
    ])
        .then(([val1, val2]) => {
            this.MyRestIPAddress = val1;
            this.MyIPPort = val2;
            return [val1, val2];
        })
);

 GetRestAddress() {
        return this.GetDataFromStorage.subscribe(([val1, val2]) => { // 'localhost','0000'
           let RestAddress = 'http://' + val1 + ':' + val2 + '/rest/';
           console.log(RestAddress);
           return RestAddress;  // 'http://localhost:0000/rest/'
        });
    }

MyService

getStoresSummaryResults(): Observable<MyTypeClass> {
        let MyConfig: MyAddressConfig;
        MyConfig = new MyAddressConfig(this.ionicStorage_);

        return this.http_.get(MyConfig.GetRestAddress() + 'my/path?&tst=1')
            .map(res => res.json()) 
            .catch(this.handleError); 
    }

Answer №1

Your function MyConfig.GetRestAddress() does not return a string; it actually returns an object. The reason you are seeing [object%20object] is because the result of MyConfig.GetRestAddress() is being converted to a string.

The issue lies in the fact that GetRestAddress() is returning a subscription. Here's how you can modify it:

GetRestAddress() { //return the url as Observable
    return this.GetDataFromStorage.switchMap(([val1, val2]) => { 
       let RestAddress = 'http://' + val1 + ':' + val2 + '/rest/';
       return Observable.of(RestAddress);  // 'http://localhost:0000/rest/'
    });
}


getStoresSummaryResults(): Observable<MyTypeClass> {
    let MyConfig: MyAddressConfig;
    MyConfig = new MyAddressConfig(this.ionicStorage_);

    return MyConfig.GetRestAddress()
        .switchMap(url => this.http_.get(url + 'my/path?&tst=1')
        .map(res => res.json()) 
        .catch(this.handleError); 
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting: Angular 2 View not reflecting changes after array push

I have encountered an issue with my two child components. They are both meant to share data from a json file that I load using the http.get/subscribe method. Oddly enough, when I try to push new data into the array, it doesn't seem to update in the vi ...

What could be causing the error when my file is running?

Whenever I attempt to run a file using the command node database.ts, an error pops up. Can someone help me identify what's wrong with my syntax? This is how the file appears: import { Sequelize } from 'sequelize-typescript'; export const ...

Encountering the ExpressionChangedAfterItHasBeenCheckedError message despite updating the property via the @Output event

Attempting to update a property on the parent component through an event in the child component has proved challenging. Research suggests that this can be achieved using @Output as it is the recommended method to transmit data from child component to pare ...

The ngx-datatable is experiencing issues with rendering rows correctly within a tab set

My angular Component (Country Component) has 3 child components as Tab (States, Population, Industries). The Parent Component contains a drop down called 'Country List' which controls the data shown in the tab. Upon loading, no country is selecte ...

How can I access the keys of an interface in which the type of interface[key] is defined?

Consider this scenario: interface Interface { a: number b: number c: string d: string e: number[] } If I want to retrieve the keys of Interface based on the type of their corresponding values in Interface, how can I achieve that? This is simila ...

Modify CSS in Angular Kendo Chart - Customize the style to display line when the value is equal to 0

Is there a way to customize the CSS style of the grid line when the value is zero on my chart? I'm looking to achieve something similar to this chart: https://i.sstatic.net/vf5wO.png ...

Using TypeScript to set Object.prototype by utilizing the spread operator

One efficient technique involves using the spread operator to quickly combine properties from multiple objects into a single object. However, is there an optimized and concise method for establishing the prototype of an object using the spread operator? ...

Encountering a Geolocation API issue during the troubleshooting of an Angular application on

Currently, I'm in the process of developing an angular application that utilizes the GeoLocation API to retrieve user location. To achieve this, I make use of the navigator.geolocation.getCurrentPosition() function. Surprisingly, everything works perf ...

Can dynamic string types be declared in Typescript?

Let's consider the following scenario: export enum EEnv { devint, qa1 }; export type TEnv = keyof typeof EEnv; export const env:Record<TEnv, {something:number}> = { devint: { something: 1, }, qa1: { something: 1, }, } Now, I ai ...

How to use ngModel directive in Angular to select/unselect dynamically generated checkboxes and retrieve their values

Currently, I am working with a dataset retrieved from an API and dynamically creating checkboxes in my HTML page using the DataView component from PrimeNG. My objective is to implement a feature where users can select or deselect all checkboxes with a cli ...

Which is more efficient: Storing the database as a private member variable in Ionic 3 SQLite or creating a new database for every query

Here's a question for you - in the context of Ionic 3, what would be the preferable approach: keeping the opened database as a private member variable within a database provider class, or calling create every time a query is made to the database? For ...

TypeScript versions 2.3 and 2.4 experiencing issues with generic overloads

After upgrading from typescript 2.2, I encountered an issue with the following example. interface ILayoutResult { id: string; data: any; } interface ILayout{ getResult<T extends ILayoutResult | ILayoutResult[] | void>() :T; } class te ...

Despite using Enzyme to locate a component again, the expected prop value is still not being returned

Two components are involved here - a modal and a button that is meant to open the modal by setting its isOpen prop to true. The initial state of the modal is set to false, but when the button is clicked, it should change to true. While everything works fi ...

Attempting to transform calc application into TypeScript, what data type should this function be?

Currently in the process of converting a calculator app to TypeScript. I've noticed that TypeScript is not prompting me to define the types for the three functions (handleClick, handleEqual, handleClear). Is specifying the type for the argument eno ...

Error TS2349: The function cannot be called as it does not have a defined call signature. The type 'typeof renderIf' does not have any compatible call signatures

Based on the starter template found at https://github.com/react-native-training/reactxp-starter, I am just starting out with TypeScript! The issue seems to be related to the type in the renderIf function. I'm unsure where exactly the type should be s ...

Nextjs has a tendency to generate an excessive amount of .js and .css files

When using nextjs and Typescript, I encountered an issue in production mode where too many .js and .css files are being loaded sequentially instead of in parallel. I expected nextjs to generate all of these processes in one webpack file, but that is not ha ...

What is the best way to obtain the value of a nested formBuilder group?

Currently, my nested form is structured like this: this.form = this.formBuilder.group({ user: this.formBuilder.group({ id: ['', Validators.required], name: ['', Validators.required], phone: ['' ...

Tips for efficiently utilizing Hooks with React Context:

I am currently working on my application and utilizing React Context with the setState function. const userContext = React.createContext([{ user: {} }, () => {}]); const userHook = useState({ user: {} }); <userContext.Provider value={userHook}> / ...

A guide to removing duplicate values from dropdown menus filled with API data in a React application

I am encountering an issue with my three dropdowns - Manufacturer, Province, and City - as they are fetching data from an API but displaying duplicate values instead of unique ones. Context: The API stores information for approximately 50 products. There ...

Prevent users from clicking buttons until all mandatory fields are filled out using react-hook-form

I am seeking guidance on how to dynamically disable a button based on the input values of both Name and State in the given code snippet. Specifically, I want to restrict button functionality until both name and state fields are filled out, regardless of ...