Get property values from objects, do calculation, then map in the front end in Angular-CodePudding

I am using Angular 15. I want to get the property values from an array of objects, use the values to do calculation and then map them in the frontend. I had tried 3 different ways, I still can't get what I want but I think I am very close. The only difference between these 3 methods is, the .subscribe at the end of the codes. Please give me a hit of what to do.

export class LeftPanelComponent implements OnInit
  objects: Objects[] = [];
  density: Array<Number>=[];

Method 1:

getObjects(): void {
    this.restService.getObjects()
    .subscribe((objects: any) => {
      this.objects = objects;
      
      const promise$ = from(objects);
      
      promise$
        .pipe(map((obj:any) => ((obj.mass)/(obj.height * obj.length * obj.width))))
        .subscribe((value) => console.log(`Emitted Values: `, value));

        
 }));

Outcome 1:

Emitted Values:  253.96825396825395
Emitted Values:  4.444444444444445
Emitted Values:  666.6666666666665
Emitted Values:  200
Emitted Values:  166.66666666666669
Emitted Values:  1666.6666666666667

It maps all the values in the console, so I am trying to map those numbers in the frontend.

Method 2:

getObjects(): void {
    this.restService.getObjects()
    .subscribe((objects: any) => {
      this.objects = objects;
      
      const promise$ = from(objects);
      
      promise$
        .pipe(map((obj:any) => ((obj.mass)/(obj.height * obj.length * obj.width))))
        .subscribe((value:any) => { this.density = value });
});

Outcome 2:

Name    Density
Van     1666.6666666666667
Pine tree       1666.6666666666667
Snake       1666.6666666666667
Giraffe     1666.6666666666667
Sheet of paper      1666.6666666666667
Television      1666.6666666666667

The table in the frontend only showing the value of the last density item.

Method 3:

getObjects(): void {
    this.restService.getObjects()
    .subscribe((objects: any) => {
      this.objects = objects;
      

      
      const promise$ = from(objects);

      promise$
        .pipe(map((obj:any) => ((obj.mass)/(obj.height * obj.length * obj.width))))
        .subscribe(((value:any) => {
          for(let i=0; i<value.length; i  ) {
            this.density[i] = value;
          }
}));

Outcome 3: It doesn't do anything in the frontend.

CodePudding user response：

This will work fine for you:

   getObjects(): void {
        this.restService
          .getObjects()
          .pipe(
            map((objects) => {
              this.objects = objects;
              return objects.map(
                (obj) => obj.mass / (obj.height * obj.length * obj.width)
              );
            })
          ) 
          .subscribe((values) =>  this.density = value);
      }

NB: Avoid nested subscriptions

CodePudding user response：

make your data structure like this

datas: Array<{name:string, density:number}>;

Create two function

const calculateDensity = (obj) => obj.mass / (obj.height * obj.length * obj.width);

const dataFactory = (objects) => objects.map((obj) => {
  return {name: obj.name, density: calculateDensity(obj)};
});

Angular : use AsyncPipe

ts:

datas$ = this.restService.getObjects().pipe(map(dataFactory));

html:

<div *ngFor="let data of datas$ | async">
// something like {{ data.name }} - {{ data.density }}
</div>