Typescript - A guide on updating the value of a key in a Map object

Question

Typescript - A guide on updating the value of a key in a Map object

My Map is designed to store Lectures as keys and Arrays of Todos as values.

lecturesWithTodos: Map<Lecture, Todos[]> = new Map<Lecture, Todos[]>();

Initially, I set the key in the Map without any value since I will add the Todos later.

student.semester.lectures.forEach((lecture) => {
    this.lecturesWithTodos.set(lecture, []);
});

Now my goal is to assign each Todo to its corresponding Lecture key.

todos.forEach((todo) => {
   this.lecturesWithTodos.get(lecture).push(todo);
});

However, I keep encountering the error message "Cannot read property 'push' of undefined." While I could work around this issue by using a string as the key, I prefer using the Lecture object for simplicity. Is there a way to make the get method work with objects as keys?

angular typescript dictionary set key

Answer 1

Answer №1

To achieve your goal, a method is provided below that may be challenging when retrieving elements from the map in the future.

Consider the following types (adjust as needed):

interface Todos {
  id: number;
  name: string;
}

interface Lecture {
  id: number;
  name: string;
}

The data at hand:

 lectures: Lecture[] = [
    { id: 100, name: 'ENG' },
    { id: 200, name: 'PHY' },
    { id: 300, name: 'BIO' }
  ];

  todos: Todos[] = [
    { id: 100, name: 'Add' },
    { id: 100, name: 'Sub' },
    { id: 300, name: 'Mul' }
  ];

Methodology for creating the map

ngOnInit() {
   this.lectures.forEach(lecture => {
      this.lecturesWithTodos.set(lecture, []);
   });

   this.todos.forEach(todo => {
      const findLecture = this.findById(todo.id);
      const findAllTodos = this.findTodos(todo.id);

      if (findLecture && findAllTodos) {
        // Indicates a previous todo exists
        this.lecturesWithTodos.set(findLecture, [...findAllTodos, todo]);
      } else if (findLecture) {
        // Indicates a new todo being added
        this.lecturesWithTodos.set(findLecture, [todo]);
      }
  });

}

/** Function to locate Lecture by todo id **/
findById(id: number) {
    return Array.from(this.lecturesWithTodos.keys()).find(e => e.id === id);
}

/** Function to locate all previous todos by todo id **/
findTodos(id: number) {
    // todos is a 2D array
    let todos = Array.from(this.lecturesWithTodos.values());

    // Convert to 1D array for searching values
    return [].concat.apply([], todos).filter(e => e.id === id);
}

Answer 2

To achieve your goal, a method is provided below that may be challenging when retrieving elements from the map in the future.

Consider the following types (adjust as needed):

interface Todos {
  id: number;
  name: string;
}

interface Lecture {
  id: number;
  name: string;
}

The data at hand:

 lectures: Lecture[] = [
    { id: 100, name: 'ENG' },
    { id: 200, name: 'PHY' },
    { id: 300, name: 'BIO' }
  ];

  todos: Todos[] = [
    { id: 100, name: 'Add' },
    { id: 100, name: 'Sub' },
    { id: 300, name: 'Mul' }
  ];

Methodology for creating the map

ngOnInit() {
   this.lectures.forEach(lecture => {
      this.lecturesWithTodos.set(lecture, []);
   });

   this.todos.forEach(todo => {
      const findLecture = this.findById(todo.id);
      const findAllTodos = this.findTodos(todo.id);

      if (findLecture && findAllTodos) {
        // Indicates a previous todo exists
        this.lecturesWithTodos.set(findLecture, [...findAllTodos, todo]);
      } else if (findLecture) {
        // Indicates a new todo being added
        this.lecturesWithTodos.set(findLecture, [todo]);
      }
  });

}

/** Function to locate Lecture by todo id **/
findById(id: number) {
    return Array.from(this.lecturesWithTodos.keys()).find(e => e.id === id);
}

/** Function to locate all previous todos by todo id **/
findTodos(id: number) {
    // todos is a 2D array
    let todos = Array.from(this.lecturesWithTodos.values());

    // Convert to 1D array for searching values
    return [].concat.apply([], todos).filter(e => e.id === id);
}

Typescript - A guide on updating the value of a key in a Map object

Answer №1

Similar questions

What is the importance of having a reference path for compiling an AngularJS 2 project using gulp-typescript?

What about combining a fat arrow function with a nested decorator?

Encountering an error while utilizing ngForm in an HTML form

Unable to convert the value "Firefox" to the specified type 'Microsoft.VisualStudio.WebClient.Diagnostics.HtmlToolHost.PineZorro.DebugAdapterType'

Steps for adding an input box to an md-menu item

Get the socket identification from ngx-socket-io

Utilizing String.Format in TypeScript similar to C# syntax

Can TypeScript automatically deduce keys from a changing object structure?

Using Angular Material to create a data table with a fixed footer and paginator feature

How can I incorporate the LIKE operator in a query when dealing with PostgreSQL's String array type using TypeORM?

Avoiding the use of destructuring for undefined values in JavaScript can be achieved by implementing

What advantages does Angular's Dependency Injection offer for a basic object setup?

Do I have to wait for the HTTP get request to access the fetched object property?

Is it possible to generate an array of objects, where each object includes an observable retrieved through forkJoin?

Inheritance-based generic type inference in Typescript

Problem with Jasmine in Angular 5 within Visual Studio Code

What is the process of creating the /dist folder in an unreleased version of an npm package?

What is the way to send custom properties to TypeScript in combination with StyledComponents?

What is the best way to format this DateTime for a more visually appealing appearance within an Angular Material <mat-card-subtitle>?

Angular: Issue with FormArrays not iterating properly