get JSON data at click a button using promises - json

Question

I'm receiving JSON data using promises and it works. But now I want to implement a button who call again API (any time that you call API you get different values) how can I do it?
quotes-provider.ts
import { Injectable } from "#angular/core";
import { Http } from '#angular/http';
import { Quote } from './quote.model';
import 'rxjs/add/operator/map';
import { resolve } from "path";
import { reject } from "q";
#Injectable()
export class QuotesProvider {
private quote: Quote;
constructor(private http: Http) {
}
public getQuote(): Quote {
return this.quote;
}
load() {
console.log("loading data...");
return new Promise((resolve, reject) => {
this.http
.get('http://quotes.stormconsultancy.co.uk/random.json')
.map(res => res.json())
.subscribe(response => {
this.quote = response;
console.log("loading complete");
resolve(true);
})
})
}
}
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule, APP_INITIALIZER } from '#angular/core';
import { AppComponent } from './app.component';
import { QuoteBoxComponent } from './quote-box/quote-box.component';
import { QuotesProvider } from './quote-box/quotes-provider';
import { HttpModule } from '#angular/http';
export function quotesProviderFactory(provider: QuotesProvider) {
return () => provider.load();
}
#NgModule({
declarations: [
AppComponent,
QuoteBoxComponent
],
imports: [
BrowserModule,
HttpModule
],
providers: [
QuotesProvider,
{ provide: APP_INITIALIZER, useFactory: quotesProviderFactory, deps: [QuotesProvider], multi: true }
],
bootstrap: [AppComponent]
})
export class AppModule { }
quote-box.component.ts
#Component({
selector: 'app-quote-box',
templateUrl: './quote-box.component.html',
styleUrls: ['./quote-box.component.css']
})
export class QuoteBoxComponent implements OnInit {
// #HostBinding('class.quote-box') quoteBox = true;
// http://quotes.stormconsultancy.co.uk/random.json
quote: Quote;
constructor(public quotesProvider: QuotesProvider) {
this.quote = quotesProvider.getQuote();
}
ngOnInit() {
console.log(this.quote.author);
}
// here I want to call API again
newQuote() {
}
}
I'm following this tutorial to do this https://devblog.dymel.pl/2017/10/17/angular-preload/

Answer 1

I dont know what exactly you want to do but if i understeand it right I dont know why are u doing this in that way. I would just create service and then inject to your components and use it on button click. Maybe tutorial is a little bit outdated.
quotes.service.ts
import { Injectable } from '#angular/core';
import { HttpHeaders, HttpClient } from '#angular/common/http';
import { Observable } from 'rxjs/Observable';
const httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
#Injectable()
export class QuotesService {
constructor(private http: HttpClient) { }
getQuotes() {
return this.http.get('http://quotes.stormconsultancy.co.uk/random.json',
httpOptions);
}
}
Then in your component in method called on button click
Constructor
constructor(private quotesService : QuotesService) { }
In method called on button click
this.quotesService.getQuotes().subscribe(quotes => {
// do what you want with your qoutes
});