How to convert the value stored in Observable<any> to a string, in typescript? - json

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.

Answer 1

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));

Answer 2

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