Return an array with response from Observable<{string; number; string;}[]>

Question

I developp a app with Angular 9, and I want return an array with my response. In my service class I have this method,

 getReport(startDate: string, endDate: string) {
    return this.http.get<ReportReport>(
      `https://localhost:44354/report?startDate=${startDate}&endDate=${endDate}`,
      this.httpOptions);
}

My object return is Report

export interface Report {
  range: string;
  opens: number;
  closes: number;
}

And I would like getReport return an array like this.

 list= [
    {
      name: 'Opens',
      value: Report.opens,
      color: 'green',
    },
    {
      name: 'Closes',
      value: Report.closes,
      color: 'red',
    }
]

So i tried with a subscribe observable like :

 getReport(startDate: string, endDate: string) {
     return this.http.get<ReportReport>(
      `https://localhost:44354/report?startDate=${startDate}&endDate=${endDate}`,
      this.httpOptions).subscribe(result => { return [{
        name: 'Opens',
        value: result.opens,
        color: 'green',
      },{

        name: 'Closes',
        value: result.closes,
        color: 'red',
      }]
    });
}

with this method I have a subscription return.

and with a map

 getReport(startDate: string, endDate: string) {
     return this.http.get<ReportReport>(
      `https://localhost:44354/report?startDate=${startDate}&endDate=${endDate}`,
      this.httpOptions).pipe(map(result => { return [{
        name: 'Opens',
        value: result.opens,
        color: 'green',
      },{

        name: 'Closes',
        value: result.closes,
        color: 'red',
      }]
    }));
}

but its doesn't work with subscribe and map.

with this method I have a Observable<{name: string; value: number color: string;}[]> for the return I just i would like this return -> {name: string; value: number color: string;}[] not observable

So it's possible to do that ? or/and How I can make this ?

Thank you for your help

No, it is not possible. You can't convert an asynchronous value to synchronous. You could make it into a promise and use async/await, but rather than that, embrace the observables. They are one of the best parts of Angular. — Akxe
thank you for you response, sorry but i'm start with angular so I don't know make this. How i can ? — Heptagram
Why you do not want to return Observable<{name: string; value: number color: string;}[]> ? — Stefan
because i want initialize an array for my component and use a ngfor for display data — Heptagram
Use of: this.httpOptions).pipe(map(result => { return of([{ ... — developer033

Michael D Michael D · Accepted Answer · 2020-03-26T12:04:34

You could subscribe to the HTTP Observable in the controller and define your array there. Try the following

Service

getReport(startDate: string, endDate: string) {
  return this.http.get<ReportReport>(`https://localhost:44354/report?startDate=${startDate}&endDate=${endDate}`, this.httpOptions);
}

Controller

public report: any;

this.reportService.getReport('...', '...').subscribe(
  response => {
    this.report = [
      {
         name: 'Opens',
         value: result.opens,
         color: 'green',
      },
      {
         name: 'Closes',
         value: result.closes,
         color: 'red',
      }
    ];
  },
  error => { // handle error }
);

And use it in the template

<ng-container *ngIf="report">
  <div *ngFor="let item of report"> 
    {{ item.name }}
    {{ item.value }}
    {{ item.color }}
  </div>
<ng-container>

Return an array with response from Observable<{string; number; string;}[]>

2 Answers