angular 5: array.length returning undefined in console but data are printed

Question

I am successfully getting values from my local APIs(laravel) and it is also storing data in variables which is also showing in views but when I tried to get the length or read it for calculating number of live and idle devices, etc. it is returning 0(in case of length) and undefined (while accessing its properties).. Below are my codes. What am I doing wrong and what can be the solution?

my dashboard.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { UserDevices } from '../../interfaces/user-devices';
import { LiveRecord } from '../../interfaces/live-record';
import { HistoryRecord } from '../../interfaces/history-record';
import { Timestamp } from 'rxjs';
import { LiveRecordModule } from '../../models/live-record/live-record.module';
import { LiveRecords } from '../../models/LiveRecords';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
  user_id: number;
  token: string;
  myDevices: number[]=[];
  myLiveRecords: LiveRecord[] = [];
  myHistoryRecords: HistoryRecord[] = [];

  runningDevices: number[] =[];
  idleDevices: number[] = [];
  stoppedDevices: number[] =[];
  inactiveDevices: number[] =[];
  devicesWithNoData: number[] =[];

  constructor(private httpClient : HttpClient) { }

  ngOnInit() {
    this.user_id = +localStorage.getItem('id');
    this.token = localStorage.getItem('token');
    this.getMyDevices(this.user_id);
    console.log(this.myDevices);                        //working

    console.log(this.myLiveRecords);                    //working
    console.log(this.myHistoryRecords);                 //working

    console.log(this.myLiveRecords.length);             // 0
    console.log(this.myLiveRecords[0].deviceId);        // Error

    this.myLiveRecords.forEach(record=>{                // not working
      console.log("record found: " + record.deviceId);
    });
    for(let record in this.myLiveRecords){              // not working
      console.log(record);
    }
  }

  getMyDevices(user_id:number){
    let promise = new Promise((resolve, reject) => {
      this.httpClient.get<number[]>("http://localhost:8000/api/getMyDevices/"+this.user_id+"?token="+this.token)
        .toPromise()
        .then(
          res => { // Success
            for(let i=0; i<res.length;i++){
              this.myDevices.push(res[i]);
              this.httpClient.get<LiveRecord>("http://localhost:8000/api/getDeviceLiveRecord/"+res[i]+"?token="+this.token)
              .toPromise()
              .then(
                res => { // Success
                  if(res!=null)
                    this.myLiveRecords.push(res[0]);
                  else
                    this.myLiveRecords.push(null);
                  //console.log(res);
                  resolve();
                },
                msg => { // Error
                reject(msg);
                }
              );
              this.httpClient.get<HistoryRecord>("http://localhost:8000/api/getDeviceHistoryRecord/"+res[i]+"?token="+this.token)
              .toPromise()
              .then(
                res => { // Success
                  if(res !=null)
                    this.myHistoryRecords.push(res[0]);
                  else
                    this.myHistoryRecords.push(null);
                  //console.log(res);
                  resolve();
                },
                msg => { // Error
                reject(msg);
                }
              );
            }
            resolve();
          },
          msg => { // Error
          reject(msg);
          }
        );
    });
    return promise;    
  }
}

my dashboard.component.html

<div class="deviceInfo">
    <div class="row">
        <div class="col-md-2" style="background:green; height:50px">
            <span>Running</span>
        </div>
        <div class="col-md-2" style="background:yellow; height:50px">
            <span>Idle</span>
        </div>
        <div class="col-md-2" style="background:red; height:50px">
            <span>Stopped</span>
        </div>
        <div class="col-md-2" style="background:grey; height:50px">
            <span>Inactive</span>
        </div>
        <div class="col-md-2" style="background:black; height:50px">
            <span>No Data</span>
            <p>{{devicesWithNoData.length}}</p>
        </div>
    </div>
</div>
<div class="row">
    <table>
        <thead>
            <td>S.N</td>
            <td>DeviceID</td>
            <td>Last Live</td>
        </thead>
        <tbody>
            <tr *ngFor="let live of myLiveRecords;let i =index">
                <td>{{i+1}}</td>
                <td>{{live?.deviceId?live.deviceId:myDevices[i]}}</td>
                <td>{{live?.recordDate?live.recordDate:"No Data"}}</td>
            </tr>

        </tbody>
    </table>
</div>

and this is what i get in browser output with console

François GUILLEMOT · Answer 1 · 2018-04-05T22:44:55.730

0

the problem is inside.

{{live?.deviceId?live.deviceId:myDevices[i]}} <--- Ternary ?

Where did you declare deviceId ? like var or let deviceId = xxxxx; add a watch in Google to see if this variable exist.

Not easy here to find. it's typeScript you should write in JavaScript 6 or 5.

edited Apr 05 '18 at 22:44

answered Apr 05 '18 at 20:57

François GUILLEMOT

16
3

Please check the picture at the last of the question.. deviceId is the attribute stored in myLiveRecords. that piece of code is working fine.. the problem is i can't access myLiveRecords.length or myLiveRecords[0].deviceId in dashboard.component.ts file – Arun Amatya Apr 05 '18 at 21:10
https://stackoverflow.com/questions/40613099/angular2-use-value-of-observable-returning-method-in-another-observable/40633446 – François GUILLEMOT Apr 05 '18 at 21:50
i guess you haven't checked the picture at the last of the question by clicking output with console link.. the above link does not provide my solution – Arun Amatya Apr 05 '18 at 22:13
I use watch in Chrome to see if variable exist Put add warch this.myLiveRecords or this.-> record.deviceId this.myLiveRecords[0].deviceId – François GUILLEMOT Apr 05 '18 at 22:34
in JS DashboardComponent.prototype.ngOnInit = function () { console.log(this.myLiveRecords[0].deviceId); // Error this.myLiveRecords.forEach(function (record) { console.log("record found: " + record.deviceId); }); for (var record in this.myLiveRecords) { // not working console.log(record); } }; – François GUILLEMOT Apr 05 '18 at 22:40
GUILLEMOT .. I tried watch also.. it is still showing undefined – Arun Amatya Apr 08 '18 at 11:35
GUILLEMOT .. do you have any other suggestions??? The last suggestion didn't helped me out. As you can see the data is being displayed from array but when I try to calculate other things from the data, it is showing me undefined. – Arun Amatya Apr 15 '18 at 17:56

angular 5: array.length returning undefined in console but data are printed

1 Answers1