What is the best way to sort through observable JSON file responses?

Question

What is the best way to sort through observable JSON file responses?

In the midst of my angular project, I have been assigned the challenge of filtering a massive file based on the "_type" key, which can hold various values. My current objective is to initiate the filtration process for _type = "COMPETITION".

The structure of my model is outlined in a competition.model.ts file, appearing as follows:

export interface Competition {
  product: { active: true };
  schemaVersion: number;      // 2,
  status: string;             // PUBLISHED",
  comp: string;               // "4fc16b10-b8b4-4a99-b9f1-842f0d8b8413",
  _createdDate: number;       // 1594249198,
  discipline: string;         // "TRAP [ACTA]",
  categories: any;            // ["OPEN", "LADIES", "JUNIOR", "VETERAN", "CLAYS_ONLY"],
  host: string;               // "2",
  changeSet: number;          // 257,
  sync: number;               // 155,
  seq: number;                // 120,
  id: string;                 // "4fc16b10-b8b4-4a99-b9f1-842f0d8b8413",
  _type: string;              // "COMPETITION",
  when: number;               // 1597154400,
  title: string;              // "ACTA Self Nom Test"
}

Take a look at my service class where I am endeavoring to execute this task:

import { Injectable, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/Operators';
import { Competition } from '../interfaces/competition.model';

@Injectable ({providedIn: 'root'})

export class CompetitionListService {

  private loadedCompetitions: Competition[];
  private url = '../../assets/data/program1.json';

  constructor(private http: HttpClient) {}

  public getCompetitions(): Competition[] { return this.loadedCompetitions; }

  public fetchCompetition(){
    return this.http
    .get<Competition[]>(this.url)
      .pipe(
        map( (responseData) => {
          const competitionsArray = [];
          for (const key in responseData ) { 
            if (responseData.hasOwnProperty(key)) {
              competitionsArray.push(
                 responseData[key]._createdDate,
                  responseData[key]._type,
                  responseData[key].categories,
                  responseData[key].changeSet,
                  responseData[key].comp,
                  responseData[key].discipline,
                  responseData[key].host,
                  responseData[key].id,
                  responseData[key].product,
                  responseData[key].schemaVersion,
                  responseData[key].seq,
                  responseData[key].status
                );
            }

          }
          console.log(competitionsArray);
          return competitionsArray;
        })
      )
      .subscribe(competitions => {
          console.log(competitions);
          this.loadedCompetitions = competitions;
      });
  }
}

I have included a snapshot of the results displayed on my console, but it fails to meet the intended outcome.

https://i.sstatic.net/Y0aL3.png

arrays json angular typescript

Answer 1

Answer №1

I have identified several issues in the code snippet:

An attempt is being made to fetch the asynchronous variable this.loadedCompetitions synchronously, which is not possible. Asynchronous variables should always be accessed asynchronously. Consider using RxJS ReplaySubject multicast observable with buffer 1 to hold and emit the last value.
Instead of manually looping through each item in the array to create a new array based on the _type === 'COMPETITION' property, utilize the Array filter function to filter out objects based on a condition.

...
import { Observable, ReplaySubject } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({providedIn: 'root'})
export class CompetitionListService {
  private loadedCompetitions: ReplaySubject<Competition[]> = new ReplaySubject<Competition[]>(1);
  private url = '../../assets/data/program1.json';

  constructor(private http: HttpClient) {
    this.fetchCompetition();      // <-- triggers the request and pushes value to `loadedCompetitions`
  }

  public getCompetitions(): Observable<Competition[]> {
    return this.loadedCompetitions.asObservable();
  }

  public fetchCompetition() {        // return nothing here
    this.http.get<Competition[]>(this.url).pipe(
      map(res => res.filter(item => item['_type'] !== 'COMPETITION'))
    ).subscribe(
      res => this.loadedCompetitions.next(res),
      err => console.log(err)           // <-- handle error
    );
  }
}

It is essential to subscribe to the loadedCompetitions variable to receive notifications from it. Use the RxJS takeWhile operator with Subject to close any open subscriptions in the ngOnDestroy hook of the component.

...
import { Observable, Subject } from 'rxjs';
import { takeWhile } from 'rxjs/operators';

export class SomeComponent implements OnInit, OnDestroy {
  private close$ = new Subject<any>();    // <-- use to close open subscriptions

  constructor(private competitionListService: CompetitionListService) { }

  ngOnInit() {
    this.competitionListService.loadedCompetitions.pipe(
      takeWhile(this.close$)
    ).subscribe(
      res => {
        console.log(res);
        // other statements that depend on `res`
      }
    );
  }

  ngOnDestroy() {
    this.close$.next();     // <-- close open subscriptions
  }
}

Answer 2

I have identified several issues in the code snippet:

An attempt is being made to fetch the asynchronous variable this.loadedCompetitions synchronously, which is not possible. Asynchronous variables should always be accessed asynchronously. Consider using RxJS ReplaySubject multicast observable with buffer 1 to hold and emit the last value.
Instead of manually looping through each item in the array to create a new array based on the _type === 'COMPETITION' property, utilize the Array filter function to filter out objects based on a condition.

...
import { Observable, ReplaySubject } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({providedIn: 'root'})
export class CompetitionListService {
  private loadedCompetitions: ReplaySubject<Competition[]> = new ReplaySubject<Competition[]>(1);
  private url = '../../assets/data/program1.json';

  constructor(private http: HttpClient) {
    this.fetchCompetition();      // <-- triggers the request and pushes value to `loadedCompetitions`
  }

  public getCompetitions(): Observable<Competition[]> {
    return this.loadedCompetitions.asObservable();
  }

  public fetchCompetition() {        // return nothing here
    this.http.get<Competition[]>(this.url).pipe(
      map(res => res.filter(item => item['_type'] !== 'COMPETITION'))
    ).subscribe(
      res => this.loadedCompetitions.next(res),
      err => console.log(err)           // <-- handle error
    );
  }
}

It is essential to subscribe to the loadedCompetitions variable to receive notifications from it. Use the RxJS takeWhile operator with Subject to close any open subscriptions in the ngOnDestroy hook of the component.

...
import { Observable, Subject } from 'rxjs';
import { takeWhile } from 'rxjs/operators';

export class SomeComponent implements OnInit, OnDestroy {
  private close$ = new Subject<any>();    // <-- use to close open subscriptions

  constructor(private competitionListService: CompetitionListService) { }

  ngOnInit() {
    this.competitionListService.loadedCompetitions.pipe(
      takeWhile(this.close$)
    ).subscribe(
      res => {
        console.log(res);
        // other statements that depend on `res`
      }
    );
  }

  ngOnDestroy() {
    this.close$.next();     // <-- close open subscriptions
  }
}

What is the best way to sort through observable JSON file responses?

Answer №1

Similar questions

React typescript props not appearing as potential defined, even after implementing the '?' optional operator and '| undefined'

Setting up Zurb Foundation in a VueJS TypeScript project: Step-by-step guide

Determination of character array length

Developing an HTML table with the power of JavaScript and JSON

Resolving typescript error in my custom hook

The onChange function in CustomSelect is triggering an endless loop of renders in a React application using TypeScript and Material-

MongoMemoryServer - Dealing with Unexpected Errors

Trouble securing an undefined value in a union type

A guide on using JOLT to swap out the outer curly braces for outer square brackets

Issues encountered during the configuration of Angular 8 Route (Auth) Guards

Using JSON Web Tokens for PHP authentication

Efficient JSON Representations for RESTful Collection Resources with Seamless Roundtripping

Mastering the use of npm and sails to create HTML-PDF files effortlessly

Unresolved issue with RxJS - Finalize not triggering

Is there a way to convert a JSONObject to a .csv file in GWT?

The function 'sendEmailVerification' is not a property of the type 'Promise<User>'

experiencing issues with JSON parsing in Xcode

Python JSON output using dump

Sending a form using AJAX causes the page to redirect

Mastering the art of left joins with Doctrine's Query Builder