{"id":1016,"date":"2021-08-30T10:16:08","date_gmt":"2021-08-30T08:16:08","guid":{"rendered":"https:\/\/fileidea.com\/?p=1016"},"modified":"2021-09-01T16:13:55","modified_gmt":"2021-09-01T14:13:55","slug":"retrigger-http-get-call-in-angular","status":"publish","type":"post","link":"https:\/\/fileidea.com\/2021\/08\/30\/retrigger-http-get-call-in-angular\/","title":{"rendered":"Retrigger http GET call in Angular"},"content":{"rendered":"\n

Let’s implement a http get call that can be “refreshed”, or recalled again so it fetches the data again. You might do some updates through SQL but because you already loaded the data, you need to get it again. This can be achieved with rxjs method switchMapTo<\/strong>.<\/p>\n\n\n\n

Have your variable of the Observable <\/strong>type, I’ll call it myData$ with the type of Object<\/strong>.<\/p>\n\n\n\n

All of this is inside a service I called myService<\/strong>.<\/p>\n\n\n\n

Let’s first declare a property like this inside our myService class:<\/p>\n\n\n

\nmyData$: Observable<Object>;\n<\/pre><\/div>\n\n\n
Then another property we name event$ <\/strong>of the type BehaviorSubject <\/strong>with the default value of true<\/strong>.<\/p>\n\n\n
\n  event$ = new BehaviorSubject(true);\n<\/pre><\/div>\n\n\n
Then inside my constructor I’ll declare myData$ <\/strong>to be equal to the switchMapTo <\/strong>like this:<\/p>\n\n\n
\n    this.myData$ = this.event$.pipe(\n      switchMapTo(this.getMyData())\n    );\n<\/pre><\/div>\n\n
\n  getMyData(): Observable<Object> {\n    return this._http.get(environment.APIPath + "\/getData", {\n      \/\/headers: .. etc\n    });\n  }\n<\/pre><\/div>\n\n\n
Then we have our main getMyData()<\/strong> function which gets our through a http get call (using Angular’s HttpClient<\/strong>). Replace the URL parameter to whatever you are getting here, I myself have a URL of http:\/\/localhost\/api\/getData (the environment variable is http:\/\/localhost\/api and the last part is the API function URL \/getData). This will be called anytime event$<\/strong> gets an incoming value. Let’s create the refresh\/refetch method like this for event$<\/strong>:<\/p>\n\n\n
\n  refetchData() {\n    this.event$.next(true);\n  }\n<\/pre><\/div>\n\n\n
Now we can call the refetchData<\/strong>() and we wil push in the boolean true value so that the BehaviorSubject<\/strong> is triggered and thus getMyData <\/strong>gets called again and our myData$ now contains the latest http GET call result. All left to do is to subscribe to it (in this case we save it to a property we call myData)!<\/p>\n\n\n
\n this.myService.myData$.subscribe((s:any) => {\n        this.myData = s;\n      });\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"
Let’s implement a http get call that can be “refreshed”, or recalled again so it fetches the data again. You might do some updates through SQL but because you already loaded the data, you need to get it again. This can be achieved with rxjs method switchMapTo. Have your variable of the Observable type, I’ll … <\/p>\n
Continue reading “Retrigger http GET call in Angular”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[31],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/posts\/1016"}],"collection":[{"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/comments?post=1016"}],"version-history":[{"count":0,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/posts\/1016\/revisions"}],"wp:attachment":[{"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/media?parent=1016"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/categories?post=1016"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/tags?post=1016"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}