I am unable to process the information and transform it into a straightforward list

Question

I am unable to process the information and transform it into a straightforward list

When using ngrx, I am able to retrieve two distinct data sets from storage.

  private getCatalog() {
    this.catalogStore.select(CatalogStoreSelectors.selectAllCatalogsLoadSuccess)
      .pipe(
        takeWhile(() => this.alive),
        take(1),
        filter(loadSuccess => !loadSuccess),
        tap(() => this.catalogStore.dispatch(new CatalogStoreActions.LoadAllAction())),
      ).subscribe();

    this.catalogs$ = this.catalogStore.select(CatalogStoreSelectors.selectAllCatalogs);
  }

The catalog$ will be of type Observable<ViewCatalog[]>, representing the first data set.

view-catalog.ts

export declare class ViewCatalog {
    code: string;
    title: string;
    lastModified: string;
}

Additionally, for each of the catalog entries, it is possible to request its individual items by using the respective catalog code.

  private getCatalogItems(catalogCode: string) {
    this.catalogStore.dispatch(new CatalogStoreActions.GetCatalogItems({catalogCode: catalogCode}));

    this.catalogItemsStore.select(CatalogItemStoreSelector.selectLoadingByCatalogSuccess)
      .pipe(
        takeWhile(() => this.alive),
        take(1),
        filter(loadSuccess => !loadSuccess),
        tap(() => this.catalogItemsStore.dispatch(new CatalogItemStoreAction.LoadByCatalog({catalogCode: catalogCode}))),
      ).subscribe();

    this.catalogItems$ =  this.catalogItemsStore.select(CatalogItemStoreSelector.selectByCatalogCode(catalogCode));
  }

This represents the second data set.

public catalogItems$: Observable<CatalogItem[]>;

CatalogItem.ts

export class CatalogItem {
  constructor(public code: string,
              public catalogCode: string,
              public title: string,
              public data: object) {
  }
}

I am looking to merge all this data into a single flat list structure as showcased below:

[
  catalog: {
    code: "Code 1",
    title: "Catalog title 1",
    lastModified: "",
    parent: null,
    hasChildren: true
  }
  catalog-item: {
    code: "CatalogItem 1",
    catalogCode: "Code 1",
    parent: "Code 1",
    hasChildren: false,
    title: "CatalogItem title 1"
  },
  catalog-item: {
    code: "CatalogItem 2",
    catalogCode: "Code 1",
    parent: "Code 1",
    hasChildren: false,
    title: "CatalogItem title 2"
  },
  catalog: {
    code: "Code 2",
    title: "Catalog title 2",
    lastModified: "",
    parent: null,
    hasChildren: true
  },
  catalog-item: {
    code: "CatalogItem 1",
    catalogCode: "Code 2",
    parent: "Code 2",
    hasChildren: false,
    title: "CatalogItem title 1"
  },
  catalog-item: {
    code: "CatalogItem 2",
    catalogCode: "Code 2",
    parent: "Code 2",
    hasChildren: false,
    title: "CatalogItem title 2"
  },
]

Assistance on achieving this would be greatly appreciated!

angular typescript rxjs observable

Answer 1

Answer №1

Here is a simplified version that demonstrates the concept. Mocks are used to imitate fetching catalogues and items.

I have included comments throughout the code for clarity.

The main idea is:

Fetch all catalogues
For each catalogue, fetch its items and combine them into an array with the catalogue itself
Join all these arrays into one

const { of, combineLatest } = rxjs;
const { delay, switchMap, map } = rxjs.operators;

// 1. Fetch all catalogues
// Observable<ViewCatalog[]>
getCatalogues().pipe(
  // Chain to fetching item Observables
  switchMap(catalogues => {
    // 2. Transform _each catalogue entry_ into
    // [ ViewCatalog, CatalogItem, CatalogItem ... ]
    // Results: Observable<(ViewCatalog|CatalogItem)[]>[]
    const results = catalogues.map(
      cat => getItemsForCatalogue(cat.code).pipe(
        // Merge the ViewCatalog entry with the CatalogItem[] items for this catalogue
        map(items => [cat, ...items])
      )
    ); 

    // 3. Use combineLatest to take the latest emissions from the store
    return combineLatest(
      results,
      // Project _each result_ into one array
      // `catsWithItems` here is of type `(ViewCatalog|CatalogItem)[][]`
      (...catsWithItems) => [].concat(...catsWithItems)
    );
  })
)
.subscribe(console.log)


// MOCKS
// getCatalogues(): Observable<ViewCatalog[]>
function getCatalogues(){
  const catalogues =
    [ { code: 1, name: 'cat-1' }
    , { code: 3, name: 'cat-3' }
    , { code: 5, name: 'cat-5' }
    ]

  return of(catalogues).pipe(delay(300));
}

// getItemsForCatalogue(catalogCode: number): Observable<CatalogItem[]>
function getItemsForCatalogue(catalogCode){
  const catalogueItems =
    [ { catalogCode: 1, name: 'item-1' }
    , { catalogCode: 1, name: 'item-2' }
    , { catalogCode: 5, name: 'item-3' }
    ]

  const items = catalogueItems.filter(
      item => item.catalogCode == catalogCode
    );

  return of(items).pipe(delay(300));
}

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ddafa5b7ae9debf3e9f3ed">[email protected]</a>/bundles/rxjs.umd.min.js"></script>

I hope you find this explanation helpful.

Answer 2

Here is a simplified version that demonstrates the concept. Mocks are used to imitate fetching catalogues and items.

I have included comments throughout the code for clarity.

The main idea is:

Fetch all catalogues
For each catalogue, fetch its items and combine them into an array with the catalogue itself
Join all these arrays into one

const { of, combineLatest } = rxjs;
const { delay, switchMap, map } = rxjs.operators;

// 1. Fetch all catalogues
// Observable<ViewCatalog[]>
getCatalogues().pipe(
  // Chain to fetching item Observables
  switchMap(catalogues => {
    // 2. Transform _each catalogue entry_ into
    // [ ViewCatalog, CatalogItem, CatalogItem ... ]
    // Results: Observable<(ViewCatalog|CatalogItem)[]>[]
    const results = catalogues.map(
      cat => getItemsForCatalogue(cat.code).pipe(
        // Merge the ViewCatalog entry with the CatalogItem[] items for this catalogue
        map(items => [cat, ...items])
      )
    ); 

    // 3. Use combineLatest to take the latest emissions from the store
    return combineLatest(
      results,
      // Project _each result_ into one array
      // `catsWithItems` here is of type `(ViewCatalog|CatalogItem)[][]`
      (...catsWithItems) => [].concat(...catsWithItems)
    );
  })
)
.subscribe(console.log)


// MOCKS
// getCatalogues(): Observable<ViewCatalog[]>
function getCatalogues(){
  const catalogues =
    [ { code: 1, name: 'cat-1' }
    , { code: 3, name: 'cat-3' }
    , { code: 5, name: 'cat-5' }
    ]

  return of(catalogues).pipe(delay(300));
}

// getItemsForCatalogue(catalogCode: number): Observable<CatalogItem[]>
function getItemsForCatalogue(catalogCode){
  const catalogueItems =
    [ { catalogCode: 1, name: 'item-1' }
    , { catalogCode: 1, name: 'item-2' }
    , { catalogCode: 5, name: 'item-3' }
    ]

  const items = catalogueItems.filter(
      item => item.catalogCode == catalogCode
    );

  return of(items).pipe(delay(300));
}

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ddafa5b7ae9debf3e9f3ed">[email protected]</a>/bundles/rxjs.umd.min.js"></script>

I hope you find this explanation helpful.

I am unable to process the information and transform it into a straightforward list

Answer №1

Similar questions

Connecting a hybrid/web client application to established remote web services outlined through a set of WSDL specifications

The Disabled element does not exhibit effective styling

Problems encountered while trying to install the angular2-meteor package using npm

Storing an image in MongoDB using Multer as a file from Angular is not working as anticipated

Angular RxJS: The never-ending reduction

The act of securing a host connection and actively monitoring it for

The DataGrid is only displaying a single result instead of multiple results

Error in React Native Navigation: Passing parameters is not functioning properly

Is there a way to transfer innerHTML to an onClick function in Typescript?

Polling database from various browser tabs

Exploring the process of authentication and authorization at individual route levels within Angular 4 using Keycloak

Integrating one service into another allows for seamless access to the imported service's properties and methods within an Angular

Angular Material Progress Spinner is static and not animated

Exploring the process of retrieving data from localStorage in Next.js 13

Is it not possible to call this authentication expression in a Typescript file when using Next JS?

Is there a simple method I can use to transition my current react.js project to typescript?

The ngx-image-cropper's roundCropper attribute is not functioning correctly as it should. An error is being displayed stating: "Type 'string' is not assignable to type 'boolean'"

Tips for eliminating a port from an Angular 2 URL

Cypress eliminating the "X-CSRFToken" header

Encountering the error message "This expression cannot be invoked" within a Typescript React Application