How to assign the length of an array to a number type variable in Angular 11?

Question

So here is my problem, I have this going on my app.component.ts :

@Component({
selector: 'sa-app',
templateUrl: './app.component.html',
})
export class AppComponent implements OnInit, AfterViewInit {

numberEditing: number = 0;

 constructor(
private measureService: MeasureService,
) {}

ngAfterViewInit() {
 this.editing()
}

editing() {
    this.medidorService.getEditing().subscribe(editingProcess => this.numberEditing = editingProcess.length) // if I console.log(editingProcess.length) I do get the number correctly.
    console.log(this.numberEditing) // UNDEFINED
    this.test(this.numberEditing)
  }

 test(numberEditing) {
   console.log(numberEditing) // UNDEFINED
 }

And whenever I console.log(editingProcess.length) I do get the number that I want to assign to

this.numberEditing,

however, if I console.log this.numberEditing, AFTER the assignment, it is always undefined.

I tried moving the this.measureService.getEditing().subscribe(editingProcess => this.numberEditing = editingProcess.length) to inside the constructor, the result is the same. I tried making this.numberEditing into an array or an object and the object comes empty and the array doesn't work, I get:

Type 'Measure[]' is not assignable to type '[]'.
  Target allows only 0 element(s) but source may have more.

I want to use the value in numberEditing in a data chart, so I need to be able to save the value in the variable and use it after I get it, right in the component.ts , HTML is not going to be used.

I do understand that I am using an observable, so by the time I have the value on my editingProcess.length, everything else has already loaded.

But then, how do I make the variable or the function that calls the variable wait for this to happen to only then - assign the value?

The whole service was not made by me but I can access and see it, it does return something and it does return the array that I want along with the items inside it correctly, I am 100% sure the problem is on my end.

Does this answer your question? [How do I return the response from an Observable/http/async call in angular?](https://stackoverflow.com/questions/43055706/how-do-i-return-the-response-from-an-observable-http-async-call-in-angular) — R. Richards, Dec 08 '22 at 09:14

score 1 · Accepted Answer · answered Dec 08 '22 at 02:57

When you subscribe to an observable, that code running is asynchronous, meaning, it will run sometime in the future, the outer console.log runs first, because is synchronous.

numberEditing = 0;

editing(): void {
  this.medidorService.getEditing().subscribe((v) => {
    this.numberEditing = v;
    console.log('inside subscribe: ', this.numberEditing)
  });
  console.log('outside subscribe', this.numberEditing)
}

The output will be:

 //outside subscribe 0
 //inside subscribe: 100

Even though the outer console log is after the subscribe, the outer console log executes first.

Whatever you need to handle after you get getEditing() do it inside the instance of subscribe, not outside.

Hungnn · Answer 2 · 2022-12-08T03:09:21.487

0

This is due to async.

Try to use: async/await.

In your case, I split to getData() method to get data first:

async getData() {
       return new Promise((resolve, reject) => {
          this.medidorService.getEditing().subscribe(editingProcess => this.numberEditing = editingProcess.length)
       })}

After that, using await to fetch data:

    editing() {
        this.numberEditing = await getData();
        console.log(this.numberEditing)
        this.test(this.numberEditing)
      }

Hope that it helps you.

edited Dec 08 '22 at 03:09

answered Dec 08 '22 at 02:48

Hungnn

68
1
2
19

This is not a problem of `async/await`. `getEditing()` returns an observable, there is no need to transform it to a promise... too complicated just for getting a response. Make use of `observables` along with `RxJs` operators – Andres2142 Dec 08 '22 at 03:00
Thank your comment @Andres2142. But have you read the author's question? "_I do understand that I am using an observable, so by the time I have the value on my editingProcess.length, everything else has already loaded. But then, how do I make the variable or the function that calls the variable wait for this to happen to only then - assign the value?_" – Hungnn Dec 08 '22 at 03:03

How to assign the length of an array to a number type variable in Angular 11?

2 Answers2