Filter an array with Observable.from

Question

1) I get array of objects from the server. This array has information about all authors. I've built this in component called: AnalyticsDataComponent and display a list with all authors and it's data.

2) I have create component called WriterComponent in which I want to display only the data that belongs to user. Because I don't want to send request again to the server and get the response with that data I have create ShareService to share the whole array. With my WriterComponent I try to filter the array so I get only the correct data. I use for this the Observable.from but not effectively.

Routes

export const routes: Routes = [
    {path: '', redirectTo: '/login', pathMatch: 'full'},
    {path: 'login', component: LoginComponent},
    {path: 'data', component: AnalyticsDataComponent},
    {path: 'writer/:writerID', component: WriterComponent}
];

AnalyticsDataComponent

export class AnalyticsDataComponent implements OnInit {

    analyticsData: Array<AnalyticsData>;
    overall: Object;
    loading: boolean;
    ready: boolean;
    whileLoding: boolean = true;
    year: string = '2016';
    month: string = '10';
    startDate: string;
    endDate: string;
    public months = Month;

    constructor(
        private services: AnalyticsDataService,
        private cookie: CookieService,
        private auth: AuthService,
        private shareService: ShareService
    ) {
        this.analyticsData = [];
    }

    ngOnInit(): void {
        this.auth.redirectNotAuthUser();
        this.setDateRange(
            {
                'year': this.year,
                'month': this.month,
            }
        );
    }

    setDateRange(value) {
        this.year = value.year;
        this.month = value.month;
        if (value.year && value.month) {
            this.whileLoding = false;
            let month = value.month;
            let lastDate = new Date(value.year, month, 1).toISOString().split('T')[0];
            this.startDate = value.year + '-' + value.month + '-' + '01';
            this.endDate = lastDate;
            this.getData();
        }
    }

    getData() {
        this.loading = true;
        this.ready = false;
        this.services.getData(this.cookie.get(), this.startDate, this.endDate)
            .subscribe(
            (response) => {
                this.overall = response.overall;
                response.data.forEach((element: any, index: number) => {
                    this.analyticsData.push(
                        new AnalyticsData({
                       pagePath: element.pagePath,
                        pageTitle: element.pageTitle,
                        wholeProfit: element.wholeProfit,
                        uniquePageView: element.uniquePageView,
                        entrance: element.entrance,
                        avgTime: element.avgTime,
                        bounceRate: element.bounceRate,
                        pageView: element.pageView,
                        author: element.author
                        })
                    );
                });
                this.loading = false;
                this.ready = true;
                this.whileLoding = true;
            },
            (error) => {
                this.loading = false;
                this.whileLoding = true;
                console.log('Error happened' + error);
            },
            () => {

                this.shareService.analyticsData = this.analyticsData;
                this.shareService.overallData = this.overall;
                console.log('the subscription is completed');
            }
            );
    }
}

WriterComponent

export class WriterComponent implements OnInit {

  writerID: number;
  writerData: Array<Object>;

  constructor(private route: ActivatedRoute, private shareService: ShareService) {
    route.params.subscribe(params => { this.writerID = params['writerID']; });
    this.writerData = [];

  }

  ngOnInit() {
    this.filterData();
  }


  filterData() {
    if (this.shareService.analyticsData !== undefined) {
      this.shareService.analyticsData.forEach(element => {
        Observable.from([element])
          .filter(data => data.author.user_id === this.writerID)
          .subscribe(
          data => {
            this.writerData.push(
              new AnalyticsData({
            pagePath: data.pagePath,
            pageTitle: data.pageTitle,
            wholeProfit: data.wholeProfit,
            uniquePageView: data.uniquePageView,
            entrance: data.entrance,
            avgTime: data.avgTime,
            bounceRate: data.bounceRate,
            pageView: data.pageView,
            author: data.author
              })
            );
          },
          err => {
            console.error(err);
          }
          );
      });
    }
  }


}

Answer 1

I think you want something like

  ngOnInit() {
    this.data = this.filterData();
  }

  filterData() {
    if (this.shareService.analyticsData !== undefined) {
      return this.shareService.analyticsData
      .filter(data => data.author.user_id === this.writerID)
      .map(data => {
          new AnalyticsData({
            pagePath: element.pagePath,
            pageTitle: element.pageTitle,
            wholeProfit: element.wholeProfit,
            uniquePageView: element.uniquePageView,
            entrance: element.entrance,
            avgTime: element.avgTime,
            bounceRate: element.bounceRate,
            pageView: element.pageView,
            author: element.author
          })
      });
    } 
    return Observable.of([]);
  }

and then bind to the data like

[someInputThatUsesData]="data | async"