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

Cross-Origin Resource Sharing (CORS) Issue: HTTP status is not okay. GoLang Mux API

Having trouble manipulating text or values of angular elements with Selenium and Python

Beginner's Guide: Building your debut JavaScript/TypeScript library on GitHub and npm

Issues with data binding in Angular2 are arising specifically in IE11

Issue with deep linking functionality on S3 storage service turning out to be

Building a TypeScript Rest API with efficient routing, controllers, and classes for seamless management

Unlock the Power of RxJS Observables in Angular

Utilizing PrimeNG dropdowns within various p-tree nodes: Distinguishing between selected choices

Tips for refreshing the apollo cache

Creating an NPM package that utilizes global types without altering the project it is integrated with

What is the best way to move between components within the same parent class using UI router in Angular 6?

Tips for creating an array that aligns with the keys of a type in TypeScript

@angular/common@~5.1.1 is needed as a peer dependency for @angular/[email protected], however it is not currently installed

Is it possible to concurrently hot module reload both the server (.NET Core) and client (Angular)?

Experimenting with a Collection of Items - Jest

Tips for addressing the issue of mat-list-item not occupying the entire row's space

Steps for creating an observable array using a Firestore DocumentReference array field

An issue arises following an upgrade in Angular from version 9 to version 10, where the property 'propertyName' is being utilized before it has been initialized

Exploring ways to conduct a thorough scan of object values, inclusive of nested arrays

Learn how to use Angular2 or TypeScript to display 'unsubscribe' and 'subscribe' text on a toggle button