How to convert the value stored in Observable to a string, in typescript?

Question

Hi I am new to Angular and TypeScript. I need the value of an Observable in the format of a string, how does one do this?

the BmxComponent file

export class BmxComponent {
    asyncString = this.httpService.getDataBmx();
    currentStock = this.httpService.getDataBmx2(); //this is what I want to covert to a string so I can pass it to onSubmit()

    onSubmit() {
        const asnNumm = this.currentStock; // passing it here changes my database, see below
        this.httpService.sendData({ stock: asnNumm })
            .subscribe(
            data => console.log(data),
            error => console.log(error)
            );
    }
}

the HttpService file

export class HttpService {

    constructor(private http: Http) {}

    getDataBmx() {
        return this.http.get('https://the-bicycle-shop.firebaseio.com/products/Bicycles/bmx/stock.json')
            .map((response: Response) => response.json());
    }

    getDataBmx2() {
        return (this.http.get('https://the-bicycle-shop.firebaseio.com/products/Bicycles/bmx/stock.json'));
    }   

    sendData(newStock: any) {
        const body = JSON.stringify(newStock);
        const headers = new Headers();
        headers.append('Content-Type', 'application/json');
        return this.http.patch('https://the-bicycle-shop.firebaseio.com/products/Bicycles/bmx.json', body, {
            headers: headers
        })
            .map((data: Response) => data.json())
            .catch(this.handleError);
    }

    private handleError(error: any) {
        console.log(error);
        return Observable.throw(error.json());
    }
}

the html file

<p>{{asyncString | async}}</p> // displays 1234 which is the correct value
<p>{{asyncString}}</p> // displays [object Object]
<p>{{currentStock}}</p> // displays [object Object]
<button class="btn btn-success" (click)="onSubmit()">Change Database</button>

my database before onSubmit() (used when I click the Change Database button)

Bicycles
|
---bmx
    |
    ---stock = 1234;

my database after onSubmit()

Bicycles
|
--- bmx
     |
     ---stock
         |
         --- _isScalar = false

I am using Firebase for this.

I know it will work with a string because I tested it with like this:

    onSubmit() {
        const asnNumm = "33333" //the change to test it
        this.httpService.sendData({ stock: asnNumm })
            .subscribe(
            data => console.log(data),
            error => console.log(error)
            );
    }

Which does this to my database

Bicycles
|
---bmx
    |
    ---stock = 33333

I understand that currentStock would hold the same value that is currently stored in my database, so it would make no difference, but I want to change it once I have converted it to a string.

Basically I want to change "stock" in my database, but by a fixed amount each time I press the Change Database button, for example, minus 1 it each time it is pressed.

share some code please... – oneNiceFriend Mar 02 '17 at 12:02 — oneNiceFriend, Mar 02 '17 at 12:02
@Roman toString just gives me [object Object] – questions Mar 02 '17 at 12:57 — questions, Mar 02 '17 at 12:57
@questions see the answer below – Roman C Mar 02 '17 at 13:39 — Roman C, Mar 02 '17 at 13:39

score 6 · Answer 1 · answered Mar 02 '17 at 13:10

6

Subscribe to the observable to get the result and call onSubmit when you receive the value:

currentStock = this.httpService.getDataBmx2()
.subscribe(val => this.onSubmit(val));

answered Mar 02 '17 at 13:10

Günter Zöchbauer

623,577
216
2,003
1,567

this won't work because onSubmit() does not accept a value – questions Mar 03 '17 at 06:20
1

Wouldn't be to hard to add a parameter so it does? – Günter Zöchbauer Mar 03 '17 at 06:44
added a parameter, now I get [object Object] again – questions Mar 06 '17 at 06:37
Where did you add what parameter? – Günter Zöchbauer Mar 06 '17 at 06:40

Roman C · Answer 2 · 2017-03-06T11:16:01.730

1

Objects has toString method that you can implement to show the value of object, or convert it to string with JSON.stringify() like this

this.httpService.sendData({ stock: asnNumm })
        .subscribe(
        data => console.log(JSON.stringify(data)),
        error => console.log(error)
        );

You have to map to the response object to get data, to get data as text you can query response object

getDataBmx2() {
    return this.http.get('https://the-bicycle-shop.firebaseio.com/products/Bicycles/bmx/stock.json')
        .map((response: Response) => response.text());
}


export class BmxComponent {
    currentStock: string;

   this.httpService.getDataBmx2().subscribe(s => this.currentStock = s); //this is what I want to covert to a string so I can pass it to onSubmit()

    onSubmit() {
        const asnNumm = this.currentStock; // passing it here changes my database, see below

edited Mar 06 '17 at 11:16

answered Mar 02 '17 at 13:38

Roman C

49,761
33
66
176

can I have an example of this in use? I only get a whole bunch of errors when I implement this. – questions Mar 03 '17 at 06:41
I don't have errors, and I'm not sure what you saying. – Roman C Mar 03 '17 at 10:32
@RomanC I think he's trying to use the code in your example as a property definition instead of value. – Aluan Haddad Mar 06 '17 at 02:14
@roman I mean can you give an example of how to use this in my code? – questions Mar 06 '17 at 06:54

How to convert the value stored in Observable to a string, in typescript?

2 Answers2

Linked