When working with promises, it is not necessary to return a value in order to move on to the next functions. If you prefer to maintain the original function signatures of retrieveData() and displayData(), where they do not require any parameters and return void, you can utilize promises in the following manner:

private dataStorage: string = null;
private retrieveDataResolver;

  displayData(): void {
    // code for displaying data goes here
    console.log("2. DISPLAYING DATA", this.dataStorage);
  }
  retrieveData(): void {
    // logic for asynchronously retrieving data goes here
    console.log("1. GETTING DATA FROM SERVER");
    setTimeout(() => { 
      this.dataStorage = '++DATA++';
      this.retrieveDataResolver(); 
    }, 1000);
  }

  retrieveDataPromise(): Promise<any> {
    return new Promise((resolve) => {
      this.retrieveDataResolver = resolve;
      this.retrieveData();
    })
  }
  retrieveAndThenDisplay() {
    this.retrieveDataPromise().then(() => {this.displayData()});
  }

I suggest using promise wrappers as a robust chaining mechanism for coordinating asynchronous operations.

Adjacent to your latest update, you have the option to link promises together. Initially retrieve the data, and trigger a graph refresh once the data is available. For a deeper understanding of promises, check out this resource: https://example.com/promises-tutorial

// Retrieve data
var promise1 = new Promise(function(resolve, reject){
    resolve('complete');
});


promise1.then(function(data) {
    refreshGraph();
})

If you're struggling to understand async concepts in rxjs terms, there's a helpful website that breaks it down in a more accessible way compared to the complex rxjs documentation.

According to them, this code snippet serves as an alternative to the async waterfall function:

var Rx = require('rx');

var async = {
    waterfall: series => {
        return Rx.Observable.defer(() => {
            var acc = series[0]();
            for (var i = 1, len = series.length; i < len; i++) {

                // Utilizing func for closure capture
                (function (func) {

                    // Applying flatMapLatest on each function
                    acc = acc.flatMapLatest(x => func(x));
                }(series[i]));
            }

            return acc; 
        });
    }
}

To implement this, you would utilize fromCallback for the initial call and fromNodeCallback for subsequent calls in order to link the results together in the sequence.

Consider trying a structure similar to the following:

 getDataFromAPI(): Promise<any> {
      return this.apiService.fetchData(this.device, this.selectedDate)
          .map(response => response.json())
          .toPromise();
  }

  executeDataFunctions() {
      this.getDataFromAPI()
          .then(response => {
              for(var item of response){
                var value = item.Date;
                var time = moment.tz(value, "Asia/singapore");
                _arr.push(time);
              }
              this.timeArray = _arr;
              console.log("Time Array: " + this.timeArray);
              return response 
          }).then(response => {
              displayProcessedData();
          })
  }

The getDataFromAPI function retrieves data using the apiService and returns a promise.

By calling executeDataFunctions, it triggers the fetchData function first. Once the data is successfully fetched, it processes the data similarly to how you handled it in your initial code (using the response iterator).

Once data processing is done, it proceeds to the next step by returning the response. Subsequently, the execution continues with displaying the processed data after all operations are completed.

This setup should theoretically work, although exact testing remains pending.

Modern javascript architecture prioritizes asynchronous design for improved user interface experiences. With this approach, HTTP get requests are initiated without pausing program execution. Instead, the program continues to run until the data is ready, at which point a notification is received and the data can be utilized.

To achieve this functionality, an Angular service must be implemented to handle data retrieval using observables.

import { Component, OnInit } from '@angular/core';
import { IntervalObservable } from "rxjs/observable/IntervalObservable";
// import data model
import { PositionsModel } from "./positionsmodel";
// import service for HTTP requests
import { MouvementService } from './mouvement.service';

@Component({
  selector: 'app-mouvementview',
  template: '<div  *ngIf="data">  
            <div>{{data.x1r'}} </div>
            </div> ',
  styleUrls: ['./mouvementview.component.css']
})

export class MouvementviewComponent implements OnInit {
  public data: PositionsModel;
  private display : boolean;

  // Inject mouvementService
  constructor(private mouvementService: MouvementService) {
    this.display = false;
    }

  ngOnInit() {
      this.mouvementService.getPositions()
      .first() // only gets fired once
      .subscribe((data) => {
        this.data = data;
        this.display = true;
        /* Refresh chart */
      });
      // if periodic refresh is needed
      // get data every subsequent 200 milliseconds
      IntervalObservable.create(200)
        .subscribe(() => {
          this.mouvementService.getPositions()
            .subscribe(data => {
          console.log(data);
          this.data = data;
          /* refresh chart */ 
            });
        });
   } 
}

Here is the HTTP service:

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from "rxjs";
import 'rxjs/Rx';
import { PositionsModel } from "./positionsmodel";

@Injectable()
export class MouvementService      {

constructor(private http: Http) {}

getPositions(): Observable<PositionsModel> {
    // Make the HTTP request:
    console.log("Initiating HTTP get request");
    return this.http
      .get('http://192.168.1.170:8080/api/mouvements')
      .map((res: Response) => {
        return res.json();
      });    
    }
}