When trying to access the key value of a dynamically generated object, it returns as undefined

Question

When trying to access the key value of a dynamically generated object, it returns as undefined

I am facing a challenge with my student object structure...

{
  Freshmen: [{id: 3}, {id: 5}],
  Sophomores: [{id: 2}, {id: 6}],
  Juniors: [{id: 1}, {id: 8}],
  Seniors: [{id: 9}, {id: 4}, {id: 7}]
}

My goal is to retrieve full student objects from the database based on the ids in the arrays. The desired output should maintain the same object structure.

In my angular component.ts file, I have attempted to achieve this as follows...

  private getStudents(obj) {
    const result = {};
    for (const key of Object.keys(obj)) {
      obj[key].map(item => {
        this.studentsService.geStudentById(item.id).subscribe(res => {
          result[key] = [];
          result[key].push(res);
        });
      });
    }
    return result;
  }

I have injected a service into the component which has a method to fetch student details by id. I call this method within getStudents(). The service returns student objects that I push into the array.

After calling the function, I assign the results to a variable studentDetails like so...

this.studentDetails = this.getStudents(studentObj);

Although everything seems fine, when I try to access

console.log(this.StudentDetails.Freshmen);

, it returns undefined.

I am wondering if there is a more efficient way to handle this situation, such as using arr.reduce() instead of arr.map()? I did try reduce but encountered an issue where only one item was returned. Any advice or suggestions would be highly appreciated.

javascript angular typescript

Answer 1

Answer №1

The issue stems from the fact that the return statement is being executed prematurely, before the async getStudentById() requests have finished processing.

A possible solution would be to utilize RxJS to combine and synchronize the requests, allowing you to work with the data only once all results are available.

By integrating RxJS into your function, the structure could resemble:

private getStudents(obj) {
  const result = {};

  // Array to hold observables
  let observables: Observables<void>[] = [];

  // Create observables for each request
  for (const key of Object.keys(obj)) {
    obj[key].map(item => {
      observables.push(
        this.studentsService.geStudentById(item.id)
          .map(res => {
            result[key] = [];
            result[key].push(res);
        });
      });
    );
  }

  // Combine and wait for all observables to emit a value
  of(...observables)
    .pipe(zipAll())
    .subscribe(() => {
      return result;
    });
}

Additionally, it may be more efficient to retrieve all students at once and filter them locally instead of making individual requests per student (depending on total number of students).

Answer 2

The issue stems from the fact that the return statement is being executed prematurely, before the async getStudentById() requests have finished processing.

A possible solution would be to utilize RxJS to combine and synchronize the requests, allowing you to work with the data only once all results are available.

By integrating RxJS into your function, the structure could resemble:

private getStudents(obj) {
  const result = {};

  // Array to hold observables
  let observables: Observables<void>[] = [];

  // Create observables for each request
  for (const key of Object.keys(obj)) {
    obj[key].map(item => {
      observables.push(
        this.studentsService.geStudentById(item.id)
          .map(res => {
            result[key] = [];
            result[key].push(res);
        });
      });
    );
  }

  // Combine and wait for all observables to emit a value
  of(...observables)
    .pipe(zipAll())
    .subscribe(() => {
      return result;
    });
}

Additionally, it may be more efficient to retrieve all students at once and filter them locally instead of making individual requests per student (depending on total number of students).

Answer 3

Answer №2

When making an asynchronous call, make sure to wait for all requests to be completed before returning the result. Otherwise, you may end up with an empty object being returned prematurely.

To address this issue, consider refactoring your code as follows:

function getStudents(obj) {
    const result = {};
    const requests = [];
    
    for (const key of Object.keys(obj)) {
        obj[key].forEach(item => {
            let currentRequest = this.studentsService.getStudentById(item.id)
                .subscribe(res => {
                    if (!result[key]) {
                        result[key] = [];
                    }
                    result[key].push(res);
                });
                
            requests.push(currentRequest);
        });
    }
    
    return new Observable(observer => {
        forkJoin(requests).subscribe(() => {
            observer.next(result);
            observer.complete();
        });
    });
}

}

Then assign the studentDetails property like so:

this.getStudents(studentObj).subscribe(result => this.studentDetails = result)

Answer 4

When making an asynchronous call, make sure to wait for all requests to be completed before returning the result. Otherwise, you may end up with an empty object being returned prematurely.

To address this issue, consider refactoring your code as follows:

function getStudents(obj) {
    const result = {};
    const requests = [];
    
    for (const key of Object.keys(obj)) {
        obj[key].forEach(item => {
            let currentRequest = this.studentsService.getStudentById(item.id)
                .subscribe(res => {
                    if (!result[key]) {
                        result[key] = [];
                    }
                    result[key].push(res);
                });
                
            requests.push(currentRequest);
        });
    }
    
    return new Observable(observer => {
        forkJoin(requests).subscribe(() => {
            observer.next(result);
            observer.complete();
        });
    });
}

}

Then assign the studentDetails property like so:

this.getStudents(studentObj).subscribe(result => this.studentDetails = result)

When trying to access the key value of a dynamically generated object, it returns as undefined

Answer №1

Answer №2

Similar questions

Is your Node.js asynchronous parallel function not performing as expected?

Utilize style as a module in Angular

Error: Unable to locate 'v8' in NextJS when using Twin Macro

Reorganizing the position of the HTML form method for processing PHP $_POST data

"Learn how to easily format specific characters in JavaScript using the text plugin to create bold text strings with a unique

AngularJS dropdown menu for input selection binding

Creating a recursive function using NodeJS

Update: Cannot mark as invalid a nested document that has not been included in an array

Implement Sorting Functionality in Angular Using FormArray

Preserve the XHR-generated configuration when the browser is refreshed

"Utilizing jQuery to apply a class based on the attributes of CSS

Experiencing problems with web page layout when using bootstrap on IE8?

How to activate a window that's been minimized in Chrome

Retrieve the current state within a redux action

Showing a pop-up on a click of a dynamically created table row, showcasing information specific to that row

Automatically forward to m.example.com on mobile devices using nodejs

Effective RxJS Subscription Management - Minimize Unnecessary Subscriptions

What are the best methods for adjusting the size of a game's

Exploring different methods to locate a random ID using XPATH, CSS path, and selector while conducting Selenium c# testing on a CMS tool

Creating a personalized input slider: A step-by-step guide