One of the class' member variables became undefined

My task is to recursively read all files from a directory.

Below is the code snippet I have used:

import { Component } from '@angular/core';
import { File } from '@ionic-native/file'

@Component({
  selector: 'page-files',
  templateUrl: 'files.html',
})
export class FilesPage {

  public filePaths: string[];

  constructor(private file: File) {
  }

  ionViewDidLoad() { 
    this.findFiles("WhatsApp/Media");
  }

  findFiles(dir: string): void {

    this.file.listDir(this.file.externalRootDirectory, dir).then(
      (files) => {
        for (let file of files) {
          if (file.isDirectory && file.name != '.' && file.name != '..') {
            this.findFiles(dir + "/" + file.name)
          } else {
            this.filePaths.push(file.name)
          }
        }
      }
    ).catch(
      (err) => {
        console.log(err.toString())
      }
      );
  }
}

While running the code, I encountered a run time error "this.filePaths is undefined" at this.filePaths.push(file.name)

Even though the member function

this.findFiles(dir: string): void
is present, it seems like something is happening with the this.filePaths member variable.

Answer №1

Error: filePaths is not defined. To resolve this issue, make sure to initialize the variable within the constructor as follows:


this.filePaths = [];

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The TypeScript feature Array.find may potentially return undefined, yet it is always treated as a specific data type

There's a minor obstacle blocking my way: const foo = ["foo", "bar"]; // type "string[]" const foundFoo = foo.find(fooEl => fooEl === "notFooBar"); // type "string" -> why not "string | unde ...

Tips for disentangling code from types in Typescript

Instead of intertwining code and types like the example below: const compar8 : boolean | error = (action: string, n: number) => { switch(action) { case 'greater': return n > 8; case 'less': ...

What is the best way to create a case-insensitive sorting key in ag-grid?

While working with grids, I've noticed that the sorting is case-sensitive. Is there a way to change this behavior? Here's a snippet of my code: columnDefs = [ { headerName: 'Id', field: 'id', sort: 'asc', sortabl ...

What is the best way to combine two arrays of objects with varying values for the same key, and add a new object to the mix?

I have two arrays: arr1 = [ { "OwnershipNumber": 0, "ID": null, "Name": "Contractor LLC", "ContrEmployeeTypeId": 0, "ContactEmail": "", "ContactPhone": "", "VeteranEmployeeMilitaryAffiliation": "", "SocialSecurityNumber": ...

Issue encountered while deploying Next.js application on vercel using the replaceAll function

Encountering an error during deployment of a next.js app to Vercel, although local builds are functioning normally. The issue seems to be related to the [replaceAll][1] function The error message received is as follows: Error occurred prerendering page &q ...

Different ways to incorporate a random element into an Angular HTML page

Curious about how to add a random component to an html file using Angular? Let's say, we have three components with unique html and css: export class Component1{} export class Component2{} export class Component3{} I would like the root of the app to ...

Steps for confirming whether each element in the array includes the specified search string using Typescript and protractor

How can I verify if each element in an array contains a specific search string in Typescript/Protractor? The issue I faced was that the console statements were returning false because they searched for exact matches instead of the search string. Any sugg ...

Problem with rendering accordion list in Ionic 2

I am integrating an accordion feature into my Ionic2 application. Here is the code snippet from my component: export class ContactPage { public days : any[]; public shownGroup; constructor(public navCtrl: NavController) { this.days= ...

Show the button only if the checkbox is selected

Can someone help me figure out how to show a button on the header bar once the checkbox is selected in a listview? Any assistance would be greatly appreciated. I have tried implementing this on my Codepen: `http://codepen.io/Hin/pen/KpGJZX` ...

How to Delete Multiple Rows from an Angular 4 Table

I have successfully figured out how to remove a single row from a table using splice method. Now, I am looking to extend this functionality to remove multiple rows at once. html <tr *ngFor="let member of members; let i = index;"> <td> ...

Steps for Adding a JS file to Ionic 3

I'm trying to figure out how to access a variable from an external JS file that I included in the assets/data folder. Here's what I've attempted: I placed test.js in the assets/data folder. In test.js, I added a variable testvar = "hello ...

The program was expecting an array to start, but instead encountered an object. Any suggestions on how to convert

{ "workingHours": [ { "date":"2023-02-01", "amount":3, "freigegeben":false } ] } Whenever I include this in my re ...

Angular 6's tslint feature is generating duplicated warnings and errors for every issue detected

After updating to Angular 6, I've noticed that every tslint error and warning is showing up twice. The versions are Tslint 5.10.0, Angular CLI 6.0.0, Typescript 2.7.2, and Codelyzer 4.3.0. Here's an example of the duplicated errors: ERROR: file. ...

Is it possible to create a map of functions that preserves parameter types? How can variadic tuple types in TypeScript v4 potentially enhance this

Initially, I faced a challenge when trying to implement a function similar to mapDispatchToProps in Redux. I struggled with handling an array of functions (action creators) as arguments, but managed to come up with a workaround that works, although it feel ...

Creating a method to emphasize specific words within a sentence using a custom list of terms

Looking for a way to highlight specific words in a sentence using TypeScript? We've got you covered! For example: sentence : "song nam person" words : ["song", "nam", "p"] We can achieve this by creating a custom pipe in typescript: song name p ...

The confusion arises from the ambiguity between the name of the module and the name of

In my current scenario, I am faced with the following issue : module SomeName { class SomeName { } var namespace = SomeName; } The problem is that when referencing SomeName, it is pointing to the class instead of the module. I have a requireme ...

Tips for enhancing a TypeScript interface for a React component in (Material-UI) by utilizing styled-components

I've been struggling to find a solution for this overload issue with no luck so far. My stack includes Typescript, Styled-components, and Material-UI. I am utilizing styled(MUIButton) to extend the default Button from MUI. While my props are being pas ...

Issues with user-generated input not properly functioning within a react form hook

After following the example provided here, I created a custom input component: Input.tsx import React from "react"; export default function Input({label, name, onChange, onBlur, ref}:any) { return ( <> <label htmlF ...

Updating data through SessionStorage.set() method isn't reflecting changes

I am facing an issue with the code below, as the sessionstate does not seem to update properly. The initial result shows 3 social security numbers, but after attempting to update it with 100 new numbers, the count remains the same. Any insights on why th ...

What steps should I take to prevent inadvertently altering a different text box while utilizing two-way binding for quantity?

Currently, I am using *ngFor within my mat-card to display data from my book table. I have also included a textbox on each card for users to input the quantity they wish to purchase. To achieve this, I utilized two-way binding on the textboxes. However, I ...