Multiple Observables within Observable not resolved as expected

Question

I have a simple question as I see it, I just don't have enough experience with Rx.

ngOnInit() {
this.agentService.getAllAgents().subscribe((agents: Agent[]) => {
  this.agents = agents.sort((x: Agent, y: Agent) =>
    Number(new Date(x.date)) - Number(new Date(y.date)));

  for (const agent of this.agents) {
    forkJoin(this.geoLocator.find(agent.address)).subscribe(results => {
      for (const coordinates of results) {
        agent.distance = this.getDistance(<Coordinates>environment.google.COORDINATES, coordinates, Unit.km);
      }
    });
  }
  console.log(this.agents[0]);
  console.log(JSON.stringify(this.agents[0]); 
});

}

This is the result I get.

The question is how and why?

Answer 1

 public find(agent: Agent): Observable<Agent> {
    return this.http.get<Agent>(`${environment.google.BASE_URL}${agent.address}`)
      .map(response => {
        const coordinates = <Coordinates> {
          latitude: response['results'][0].geometry.location.lat,
          longitude: response['results'][0].geometry.location.lng
        };
        agent.distance = this.getDistance(<Coordinates>environment.google.COORDINATES, coordinates, Unit.km);
        return agent;
      });
  }