How to Return an Array from Observable

I don't think you're thinking about this in the correct direction. readAsArrayBuffer is an asynchronous call. Hence it returns a promise.

You shouldn't simply return an TimesheetModel[] from your getAllTimesheets() method.

Rather, you should return an Observable<TimesheetModel[]>. But you'll have to make a small change wherever you're calling this getAllTimesheets() method.

Since it returns an Observable<TimesheetModel[]>, you'll have to either subscribe to getAllTimesheets() at all those places. Or you'll have to read this Observable in your template using the async pipe.

I'd recommend the latter.

So make this following changes to your getAllTimesheets() method.

public getAllTimesheets(): Observable<TimesheetModel[]> {
  const storageId = TIMESHEET_KEYS.ALL_TIMESHEET;
  return from(
    this.cordovaFile
    .readAsArrayBuffer(this.cordovaFile.dataDirectory, storageId)
    .then((compressedTimesheet) => {
      const start = moment();
      const uint8array = new Uint8Array(compressedTimesheet);
      const jsonTimeSheet = this.LZString.decompressFromUint8Array(uint8array);
      this.log.debug(`LocalStorageMaterialService: getMaterials() from files: Decompression took ${moment().subtract(start.valueOf()).valueOf()} ms`);
      return <TimesheetModel[] > JSON.parse(jsonTimeSheet) || [];
    })
    .catch((error) => {
      this.log.debug('LocalStorageMaterialService: Retrieving materials from file storage was not possible: ', JSON.stringify(error));
      return [];
    })
  );
}

And then wherever you're using it, if you're subscribeing to it:

// unsubscribe this subscription on ngOnDestroy()
const subscription = getAllTimesheets()
  .subscribe(timesheetData => {
    // Here you'll get that data.
  })

Don't register your entire promise as an observable. Setup a BehaviorSubject and update the subject with the result of your promise using .next(). You can then subscribe to that result.

Assuming this is all in a service, you can set this up as follows:

@Injectable({ providedIn: 'root' })
export class TimesheetsService {
  /**
   * Create a new behavior subject with an empty array. This is what you will
   * subscribe to from outside of your service.
   */
  public timesheets$: BehaviorSubject<TimesheetModel[]> = new BehaviorSubject([]);

  constructor() {
    // Call your service method to GET your data.
    this.getAllTimesheets();
  }

  /**
   * This method is how you will update your behavior subject and can be called
   * from outside the service each time you want to update your result.
   */
  public getAllTimesheets() {
    return this.cordovaFile
      .readAsArrayBuffer(this.cordovaFile.dataDirectory, storageId)
      .then((compressedTimesheet) => {
        const uint8array = new Uint8Array(compressedTimesheet);
        const jsonTimeSheet = this.LZString.decompressFromUint8Array(uint8array);
        // On success, update the behavior subject with the result of your call.
        return timesheets$.next(JSON.parse(jsonTimeSheet));
      })
      // Or on error, update the behavior subject.
      .catch(() => timesheets$.next([]));
  }
}

Then in your component you can subscribe to your result$ observable.

export class YourComponent implements OnInit {
  timesheets: TimesheetModel[];

  constructor(private timesheetsService: TimesheetsService) {
    // Optionally call your service method again to GET fresh data.
    this.timesheetsService.getAllTimesheets();
  }

  ngOnInit() {
    /**
     * Subscribe to the result of your service call and pass the result to a
     * reference to be consumed by your component.
     */
    this.timesheetsService.timesheets$
      .subscribe((timesheets) => this.timesheets = timesheets);
  }
}

You can simply use as []

timesheetArray.subscribe((timesheet) => {
    const time_sheet = timesheet as [];
});