The Challenge of Iterating Through an Array of Objects in Angular Components using TypeScript

Question

The Challenge of Iterating Through an Array of Objects in Angular Components using TypeScript

Could someone please explain why I am unable to iterate through this array? Initially, everything seems to be working fine in the ngOnInit. I have an array that is successfully displayed in the template. However, when checking in ngAfterViewInit, the console.log displays the array but looping through it using "for of" or "forEach" does not yield any results.

import { JobsService } from '../jobs.service';
import {Job} from '../models/Job';

@Component({
    selector: 'app-job',
    templateUrl: 'job.component.html'
})

export class JobComponent implements OnInit, AfterViewInit {
    title = 'Job';
    jobs: Job[] = [];
    InProcess = '';
    CurrentPartner = '';
    ShowProcess = false;
    sended = '';

    constructor(private jobsService: JobsService) {
    }

    ngOnInit() {
        this.jobs = this.jobsService.getJobs();
    }
    ngAfterViewInit() {
      console.log(this.jobs); // The array is shown in the console

      // Looping through the array doesn't work
      this.jobs.forEach((oneJob) => {
        console.log(oneJob);
      });
    }
}

Screenshot of the console in Google Chrome

The content of the service:

import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import {Job} from './models/Job';

interface IJob {
  message: string;
  jobs: any[];
}

@Injectable({
  providedIn: 'root'
})

export class JobsService {
  constructor(private httpClient: HttpClient) { }
  private REST_API_SERVER = 'http://localhost:8080/myband/api/getjobs.php';
  private REST_API_SERVER_SEND = 'http://localhost:8080/myband/api/sendjob.php';
  jobList: Job[] = [];
  errorMessage: any;
  message: string;

  static handleError(err: HttpErrorResponse) {
    let errorMessage = '';
    if (err.error instanceof ErrorEvent) {
      errorMessage = `An error occurred: ${err.error.message}`;
    } else {
      errorMessage = `Server returned code: ${err.status}, error message is: ${err.message}`;
    }
    console.error(errorMessage);
    return throwError(errorMessage);
  }

  public getJobs() {
    this.requestJobs().subscribe(
      iJob => {
        this.message = iJob.message;
        for (const job of iJob.jobs) {
          const oneJob: Job = new Job(job);
          this.jobList.push(oneJob);
        }
      },
      error => this.errorMessage = error as any
    );
    return this.jobList;
  }

  public requestJobs(): Observable<IJob> {
    return this.httpClient.get<IJob>(this.REST_API_SERVER).pipe(
       catchError(JobsService.handleError)
    );
  }
}

javascript angular typescript for-loop foreach

Answer 1

Answer №1

First and foremost, I want to emphasize the importance of isolating responsibilities in your code.

Your service should focus on providing a single function: offering a way to access your data. This means that any logic within the getJobs() method can be handled within your component.

export class JobsService {
    constructor(
        private httpClient: HttpClient,
    ) {}
    private REST_API_SERVER = 'http://localhost:8080/myband/api/getjobs.php';

    public requestJobs(): Observable<IJob> {
        return this.httpClient.get<IJob>(this.REST_API_SERVER);
    }
}

With this approach, you have the freedom to manipulate your data within your component.

import { JobsService } from '../jobs.service';

@Component({
    selector: 'app-job',
    templateUrl: 'job.component.html'
})

export class JobComponent implements OnInit, AfterViewInit {
    title = 'Job';
    jobs$;
    InProcess = '';
    CurrentPartner = '';
    ShowProcess = false;
    sent = '';

    constructor(private jobsService: JobsService) {
    }

    ngOnInit() {
        this.jobs$ = this.jobsService.requestJobs();
    }



    ngAfterViewInit() {
        this.jobs$
            .pipe(
                map(() => {}), // modify your data here
                catchError(() => {}) // handle errors here;
            )
            .subscribe(
                () => {} // access your final data here. 
            );
    }
}

Key Points:

You have the option to remove the subscribe() call and utilize the async pipe in your template;
Using the map operator in pipe() is not mandatory – you can work directly with your final data within the initial subscribe() callback.
You can convert an Observable into a Promise by employing the toPromise() method on a single observable. Remember to use async / await within your ngAfterViewInit.

If you need further assistance or clarification, feel free to reach out.

Answer 2

First and foremost, I want to emphasize the importance of isolating responsibilities in your code.

Your service should focus on providing a single function: offering a way to access your data. This means that any logic within the getJobs() method can be handled within your component.

export class JobsService {
    constructor(
        private httpClient: HttpClient,
    ) {}
    private REST_API_SERVER = 'http://localhost:8080/myband/api/getjobs.php';

    public requestJobs(): Observable<IJob> {
        return this.httpClient.get<IJob>(this.REST_API_SERVER);
    }
}

With this approach, you have the freedom to manipulate your data within your component.

import { JobsService } from '../jobs.service';

@Component({
    selector: 'app-job',
    templateUrl: 'job.component.html'
})

export class JobComponent implements OnInit, AfterViewInit {
    title = 'Job';
    jobs$;
    InProcess = '';
    CurrentPartner = '';
    ShowProcess = false;
    sent = '';

    constructor(private jobsService: JobsService) {
    }

    ngOnInit() {
        this.jobs$ = this.jobsService.requestJobs();
    }



    ngAfterViewInit() {
        this.jobs$
            .pipe(
                map(() => {}), // modify your data here
                catchError(() => {}) // handle errors here;
            )
            .subscribe(
                () => {} // access your final data here. 
            );
    }
}

Key Points:

You have the option to remove the subscribe() call and utilize the async pipe in your template;
Using the map operator in pipe() is not mandatory – you can work directly with your final data within the initial subscribe() callback.
You can convert an Observable into a Promise by employing the toPromise() method on a single observable. Remember to use async / await within your ngAfterViewInit.

If you need further assistance or clarification, feel free to reach out.

Answer 3

Answer №2

Give this a shot:

Using the Object.keys method to iterate through the jobs object and log each job to the console.

Answer 4

Give this a shot:

Using the Object.keys method to iterate through the jobs object and log each job to the console.

Answer 5

Answer №3

Make sure to replace the below part of your code with an iterator function:

// When looping through the array, nothing is happening
this.jobs.forEach(oneJob, function(value, key) {
    console.log(key + ': ' + value);
});

Using forEach in AngularJS:

To learn more, check out AngularJS forEach Docs

Syntax:

someIterable.forEach(object, iterator, [context])

Answer 6

Make sure to replace the below part of your code with an iterator function:

// When looping through the array, nothing is happening
this.jobs.forEach(oneJob, function(value, key) {
    console.log(key + ': ' + value);
});

Using forEach in AngularJS:

To learn more, check out AngularJS forEach Docs

Syntax:

someIterable.forEach(object, iterator, [context])

Answer 7

Answer №4

Take a look at the example provided below

class Position {
    title: any;
    department: any;
    constructor(details: any) {
        this.title = details.title;
        this.department = details.department;
    }
}

let positions = [
    {
        title: "Manager",
        department: "Operations"
    }, 
    {
        title: "Developer",
        department: "Technology"
    }
];

let positionList: any = [];

positions.forEach(p => {
    let role: Position = new Position(p);
    positionList.push(role);
})

console.log(positionList);

positionList.forEach((p: any) => {
    console.log(p);
})

Answer 8

Take a look at the example provided below

class Position {
    title: any;
    department: any;
    constructor(details: any) {
        this.title = details.title;
        this.department = details.department;
    }
}

let positions = [
    {
        title: "Manager",
        department: "Operations"
    }, 
    {
        title: "Developer",
        department: "Technology"
    }
];

let positionList: any = [];

positions.forEach(p => {
    let role: Position = new Position(p);
    positionList.push(role);
})

console.log(positionList);

positionList.forEach((p: any) => {
    console.log(p);
})

The Challenge of Iterating Through an Array of Objects in Angular Components using TypeScript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Issue with Moment.js: inability to append hours and minutes to a designated time

Storing Angular files with JBoss caching

Unable to perform the GET request method due to data indicating [object object]

My JavaScript array is not working with the stringify function

Adjust the range slider's color depending on its value

Navigating with Node.js: Understanding how to showcase the response data within a list structure

How can we use Mongoose .find to search with an array stored in req.params and respond with an array containing each value along with its

The offline functionality of the Angular Progressive Web App(PWA) is experiencing difficulties

Associate a click event to a dropdown menu element to trigger on selection

Can the sliding transition effect used in createMaterialTopTabNavigator be implemented in createMaterialBottomTabNavigator as well?

What's the best way to apply a class to a React element upon clicking it?

I have to make sure not to input any letters on my digipas device

Facing issues with Handsontable opening within a jQuery UI dialog?

Having trouble deploying Firebase Cloud function following the migration to Typescript

Preventing Paste Function in Electron Windows

Steps for inserting an item into a div container

Error message: "Link binding error in knockout collection"

Show various perspectives depending on the circumstances

Eliminate the JSON object within jqGrid's posted data

Identify and handle multiple scenarios in JavaScript without using if statements