How to load a list with data from HTTP content?

Question

I have a problem. I'm newbie in Angular and I try, to load data from backend (c#) and show it on the front.

In my backend I have a List of Models fills with sample data.

public static List<CheckModel> checkModels = new List<CheckModel>();

CheckModel looks like this:

public string Id { get; set; }
public string Name { get; set; }

And now I'm trying to view this in Angular. If i create list like this directly in my component.ts:

ordersData = [
{ id: 100, name: 'order 1' },
{ id: 200, name: 'order 2' },
{ id: 300, name: 'order 3' },
{ id: 400, name: 'order 4' }
];

Then i can view this in html table and everything is okay. To the every row in table I would like to add checkbox, so I used this method:

private addCheckboxes() {
this.ordersData.forEach(() => this.ordersFormArray.push(new FormControl(false)));
}

I would to load data from my API. I tried this way:

constructor(
    private http: HttpClient,
    private formBuilder: FormBuilder
    ) {
  this.form = this.formBuilder.group({
    orders: new FormArray([])
  });
  this.addData();
  this.addCheckboxes();
}

private addData() {
    return this.http.get<CheckModel[]>('api/check/getData')
};

ordersData: CheckModel[];
  
private addCheckboxes() {
this.ordersData.forEach(() => this.ordersFormArray.push(new FormControl(false)));
}

But this case isn't work. Developers tools in Chrome shows me an error:

core.js:6014 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'forEach' of undefined
TypeError: Cannot read property 'forEach' of undefined

So, how can i load data from my API to the ordersData list? Please, forgive me for banal questions!

Panagiotis Bougioukos · Accepted Answer · 2020-12-09 22:17:32Z

1

You need to subscribe to fetch the value when it is available.

  private addData() {
    return this.http.get<CheckModel[]>('api/check/getData').subscribe(
            (checkModelArray: CheckModel[]) => {
            this.ordersData = checkModelArray;
            this.addCheckboxes()
                         });
};

Also remove this.addCheckboxes() from constructor!!! It can not be fired by constructor since the data it needs will be undefined.

Subscription will return at a later time but constructor will run initialy when angular creates the component. The data that the constructor needs will not be available when the constructor executes. So you have to force your logic inside the subscription function.

edited Dec 9, 2020 at 22:17

answered Dec 9, 2020 at 21:40

Panagiotis Bougioukos

19.6k4 gold badges42 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vidaloka Over a year ago

You're the best! Thank You very much, It's working :D

Panagiotis Bougioukos Over a year ago

@Vidaloka please mark it as accepted if problem is solved.

Collectives™ on Stack Overflow

How to load a list with data from HTTP content?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related