What is the process for extracting the elements of an array fetched from a service in Angular 2?

Question

What is the process for extracting the elements of an array fetched from a service in Angular 2?

Currently, I am learning Angular 2 + PrimeNG and going through a quick start project available at the following link: https://github.com/primefaces/primeng-quickstart

The project is a CRUD application and it functions flawlessly. The data is neatly displayed in a table on my browser. It's impressive!

However, as I attempt to make some modifications to the code, everything seems to work fine except for my own code glitch.

export class AppComponent {

    displayDialog: boolean;

    car: Car = new PrimeCar();

    selectedCar: Car;

    newCar: boolean;

    cars: Car[];

    constructor(private carService: CarService) { }

    ngOnInit() {
        this.carService.getCarsMedium().then(cars => this.cars = cars);

        //MY CODE LIES HERE:
        console.log(this.cars);            
        for (let entry of this.cars) {
            console.log(entry);
        }
    }

The initial console.log returns an undefined message while the subsequent for loop disrupts the application flow.

Essentially, I am trying to mirror the data being shown in the browser onto the console. Any assistance would be greatly appreciated!

Thank you! =)

angularjs angular typescript primeng

Answer 1

Answer №1

To ensure that your code runs only after the observable result is available, you should move it inside the then(...) block. Otherwise, there's a risk of it executing prematurely.

ngOnInit() {
    this.carService.getCarsMedium().then(cars => {
        this.cars = cars;
        //MY UPDATED CODE:
        console.log(this.cars);            
        for (let entry of this.cars) {
            console.log(entry);
        }
    });
}

Answer 2

To ensure that your code runs only after the observable result is available, you should move it inside the then(...) block. Otherwise, there's a risk of it executing prematurely.

ngOnInit() {
    this.carService.getCarsMedium().then(cars => {
        this.cars = cars;
        //MY UPDATED CODE:
        console.log(this.cars);            
        for (let entry of this.cars) {
            console.log(entry);
        }
    });
}

What is the process for extracting the elements of an array fetched from a service in Angular 2?

Answer №1

Similar questions

Kendo Grid with locked height

Using TypeScript with Vue to Retrieve Information from a Form

Associating function parameters with object types in TypeScript

Having trouble with serving static files on elastic beanstalk

I want to learn how to display the rupee symbol instead of the default dollar symbol in AngularJS for specific currency symbols

Connect a datetime-local typed input to a Date attribute in Angular 2

Angular.js Routeprovider for "landing page"

Using the Angular two-way binding tag within a Spring Boot Thymeleaf application allows for seamless data synchronization between

Using an external npm module in TypeScript can result in the tsc output directory being modified

Is it possible to integrate Symfony, Node.js, and Angular into a single application?

Is there a tidier method for coding this JSX?

RxJS: when combined with timer, groupBy operator does not emit any values

Leverage both props and destructuring in your Typescript + React projects for maximum efficiency!

The reference to Angular is missing

Angular 6 Error: Template Driven Form - Unable to access property 'required' in null entity

Using a universal class URL for all components in Angular 6: Tips and tricks

Is there a way to trigger an image flash by hovering over a button using the mouseover feature in AngularJS2?

Building a Custom Dropdown Select List with FormControlName and ControlValueAccessor in Angular 8

Leveraging a Static HTML landing page template within an Angular 6 application

Exciting ngClass variation