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

Steps for sending a POST request for every file in the given array

D3-cloud creates a beautiful mesh of overlapping words

Error encountered in Angular 7.2.0: Attempting to assign a value of type 'string' to a variable of type 'RunGuardsAndResolvers' is not allowed

Angular 2 template can randomly display elements by shuffling the object of objects

TypeScript Interfaces: A Guide to Defining and

What is the best way to implement a switch case with multiple payload types as parameters?

What is the best way to reset a setInterval ID in Angular?

How to display a festive greeting on the specific holiday date using the ngx-bootstrap datepicker

Tips for selecting an image from the gallery with IONIC 3

Although VSCode is functioning properly, there seems to be a discrepancy between the VSCode and the TS compiler, resulting in an

Next.js page freezes when Axios request is made causing the tab to become unresponsive

Is it normal that aws-eventbridge-lambda does not generate a Lambda function?

Properly specifying the data type for a generic type variable within a function in TypeScript

Prevent Chrome Extension Pop-up from Resetting when Closed

How to control the audio currentTime using Angular 2 component

Issue encountered while attempting to utilize the useRef function on a webpage

What is the best method to display a tooltip for a disabled radio button within a set of radio buttons?

What is the reason for a boolean extracted from a union type showing that it is not equivalent to true?

Building a filter for a union type in TypeScript: a step-by-step guide

Angular 7: Unable to connect with 'messages' because it is not recognized as a valid attribute of 'message-list'