Efficient async call in Pipe angular2 - asynchronous

Question

I am trying to get an address conversion of longitude and latitude values via the google maps api. I have looked into the angular2 pipe example concerning impure pipes (https://angular.io/docs/ts/latest/guide/pipes.html), and this indeed gives me a working piece of code (pure pipes result into null)
The only problem is, that the http call is being done multiple times, because of the impure pipe. The data does not change anymore, and needs to be converted only once.
The pipe:
import {Pipe, PipeTransform} from '#angular/core';
import {Http} from '#angular/http';
#Pipe({name: 'location', pure: false})
export class LocationPipe implements PipeTransform {
private readableLocation = null;
private fetchedJson = null;
private prevUrl = '';
constructor(private http:Http) {}
transform(location:string):string {
if (location !== this.prevLoc) {
var arr = location.split(",", 2);
var lat = arr[0];
console.log(lat);
var lon = arr[1];
console.log(lon);
var url = 'http://maps.googleapis.com/maps/api/geocode/json?latlng=' + lat + ',' + lon + '&sensor=true';
console.log(url);
this.prevLoc = location;
this.fetchedJson = null;
this.http.get(url)
.map( result => result.json() )
.subscribe( result => this.fetchedJson = result );
}
if (this.fetchedJson != null) {
return this.fetchedJson.results[0].formatted_address;
}
return this.fetchedJson;
}
}
The HTML:
<td>{{log.location | location}}</td>
The 'log' data is received from the backend via a service:
import {Injectable} from '#angular/core';
import {Http} from '#angular/http';
export class Log {
_id: Object;
username: string;
status: boolean;
location: string;
modelName: string;
searchTerm: string;
created: number;
static create(data){
console.log("New log created and added to the list:");
console.log(data);
return new Log(data);
}
constructor(data){
this._id = data._id;
this.username = data.username;
this.status = data.status;
this.location = data.location;
this.modelName = data.modelName;
this.searchTerm = data.searchTerm;
this.created = data.created;
}
}
#Injectable()
export class LogService {
public logs;
constructor(private http: Http){
this.logs = http.get('https://arest-api.herokuapp.com/users?userStatus=true')
.map(res => res.json())
.map(rawUsers => rawUsers.map(Log.create));
}
}
log.location contains the lon and lat values in string format: "51.993398,4.386851"
It takes some seconds for the data to load and display, although it contains only 2 records.
Is there perhaps any better/faster/more efficient way of getting the same result?
Thank you so much for your help! Please let me know if any more information is needed.
edit: moving up the caching results in only two requests. Though the question remains whether this could be implemented in a better/more efficient way? The impure pipe is still called upon many times, while the data does not change.