title: Angular asynchronous data request, data array first index undefined
body: <p>In a function getPrognoseData() I am calling some data from http. THe log shows the data is present. However, If I continue to process the data in another function called <code>showFnct(0,this.dataArray)</code>, the log</p>
  
  <pre><code>console.log("Array:",nnn)
  console.log("Array[0]:",nnn[0])
  </code></pre>
  
  <p>shows me that the data is undefined (or not present):</p>
  
  <pre><code>Array[0]: undefined
  leistung.component.ts:81 Value: 0
  leistung.component.ts:83 actual data: undefined
  </code></pre>
  
  <p>what am I doing wrong?</p>
  
  <pre><code>ngOnInit() {
  
      this.dataArray = this.getPrognoseData();
      console.log("Leistung Chart Daten:",this.dataArray);
      this.actualData = this.showFnct(0,this.dataArray);
  
    }
  
    showFnct(value, array) {
      var nnn = array;
      console.log("Array:",nnn)
      console.log("Array[0]:",nnn[0])
      console.log("Value:",value);
      this.actualData= array[0];
      console.log("actual data:",this.actualData);
  
      for (var elem of array) {
        for (var subElem of elem.series) {
          if (subElem.value &gt; this.maxValue) {
            this.maxValue = subElem.value;
          }
          if (subElem.value &lt; this.minValue) {
            this.minValue = subElem.value;
          }        
        }      
      }
      var range = this.maxValue - this.minValue;
      this.maxOffset = this.maxValue + range*0.1;
      this.minOffset = this.minValue - range*0.1;
      console.log("minoffset:",this.minOffset)
      console.log("Nowdata:",this.actualData);
      return this.actualData;
    }
  </code></pre>
  
  <p>Here is the implementation of getPrognoseData():</p>
  
  <pre><code>getPrognoseData() {
      //dummy-data
      var startTime = '2018-06-23T00:44:55';
      var endTime = '2018-09-30T14:00:55';
      var id = '123456789';
      //http://localhost:3452/edit/2018-07-23T00:44:55.2018-07-30T14:00:55.987654321
      //Builds Prognose-Daten-Graph
      this.http.get&lt;any&gt;(`http://localhost:5555/Demonstrator/` + id + "." + startTime + "." + endTime, {observe: 'response'}
      ).subscribe(resp =&gt; {
        if (resp.status === 200) {
          console.log("Verlauf el. Leistung: ", resp.body);
          var elLeistung = [];
          var elNFLeistung = [];
          for (var elem of resp.body) {
            elLeistung = elLeistung.concat(elem["aktElErzeugungsleistung"]);
            elNFLeistung = elNFLeistung.concat(elem.aktElNachfrageleistung);
          }
          elLeistung.sort(function(a,b){return new Date(a.Timestamp).getTime() - new Date(b.Timestamp).getTime()});
          elNFLeistung.sort(function(a,b){return new Date(a.Timestamp).getTime() - new Date(b.Timestamp).getTime()});
          console.log("elLeistung:",elLeistung);
  
          let aktElEZLeistung = elLeistung;//resp.body[0]["aktElErzeugungsleistung"];
          let aktElNFLeistung = elNFLeistung;//resp.body[0]["aktElNachfrageleistung"];
          let maxValue = -10000000;
          let minValue = +10000000;
          //Erzeuge NGX Chart Daten für aktuelle elekt. Erzeugungsleistung:
          //this.aktElLeistung.name = "aktElEZLeistung";
          var aktElEZLeistungDok: any = {
            name: "erzeugte Leistung",
            series: [],
          }
          for (let i = 0; i&lt;aktElEZLeistung.length; i++) {
            this.newData = {
              name: new Date(aktElEZLeistung[i]["Timestamp"]),
              value: aktElEZLeistung[i]["Betriebswert"]
            }
            aktElEZLeistungDok.series.push(this.newData);
          }
  
          this.dataArray.push(aktElEZLeistungDok)
  
          var aktElNFLeistungDok: any= {
            name: "nachgefragte Leistung",
            series: [],
          }
          for (let i = 0; i&lt;aktElNFLeistung.length; i++) {
            this.newData = {
              name: new Date(aktElNFLeistung[i]["Timestamp"]),
              value: aktElNFLeistung[i]["Betriebswert"]
            }
            aktElNFLeistungDok.series.push(this.newData);
          }
          this.dataArray.push(aktElNFLeistungDok)
  
  
          var aktElLeistung: any = {
            name: "elektr. Leistung",
            series: [],
          }
          for (let i = 0; i&lt;aktElEZLeistung.length; i++) {
            this.newData = {
              name: new Date(aktElEZLeistung[i]["Timestamp"]),
              value: aktElEZLeistung[i]["Betriebswert"]-aktElNFLeistung[i]["Betriebswert"]
            }
            if (this.newData.value &gt;= maxValue) {
              maxValue = this.newData.value;
            }
            if (this.newData.value &lt;= minValue) {
              minValue =this.newData.value;
            }   
  
            aktElLeistung.series.push(this.newData);
          }
          var offset = 50;
          this.minOffset = minValue - offset;
          this.maxOffset = maxValue + offset;
          this.dataArray.push(aktElLeistung);
          this.actualData = this.dataArray;
          console.log("El Leistung:", this.dataArray);
  
          //Abschnitt für Fahrplanprognose Daten
          var fpdata;
          //http://localhost:5555/DNZ/FP/2018-07-23T00:44:55.2018-07-30T14:00:55.987654321
          this.http.get('http://localhost:342/'+id+'.'+startTime+'.'+endTime)
          .subscribe(
            data =&gt; { fpdata = data; console.log("FPData:",fpdata);
            var progBW: any = {
              name: "progn. Betriebswert",
              series: [],
            }
            for (let i = 0; i&lt;fpdata.length; i++) {
              this.newData = {
                name: new Date(fpdata[i]["Timestamp"]),
                value:  fpdata[i]["PrognostizierterBetriebswert"],
              }
              progBW.series.push(this.newData);
            }
            this.dataArray.push(progBW);
            this.actualData = this.dataArray;
            console.log("DataArray elLeistung und ProgBW:", this.dataArray);
          },
            err =&gt; console.error(err)
          );
  
        } else {
          console.log('error bei verbindung');
        };
  
      });
      console.log("Data Array progBW und El Leistung:",this.dataArray);
      /this.dataArray;*/
      return this.dataArray
      }
  </code></pre>
  
  <p>to explain the last method: I am basically doing 2 http requests... and for both I am basically creating some documents {name:... series:[]} to fit the ngx charts data format based on the http data.... and pushing them into the array dataArray...</p>