Combining the output of two Observables through the CombineLatest method to generate a

Question

Combining the output of two Observables through the CombineLatest method to generate a

I possess two separate collections of information:

Data Model: taxControlReference

 [
    {
        "providerId": "HE",
        "taxTables": {
            "STAT": [
                1
            ]
        }
    },
    {
        "providerId": "REMC",
        "taxTables": {
            "STAT": [
                1
            ]
        }
    },
    {
        "providerId": "WBLUE",
        "taxTables": {
            "STAT": [
                1
            ]
        }
    }
]

Data Model: taxControl

[
    {
        "taxTypeId": "FED",
        "taxIndustryDescription": "Federal",
        "taxIndustryLabel": "Federal",
        "taxControlReferenceCounter": 1,
        "transactionOn": null
    },
    {
        "taxTypeId": "FRAN",
        "taxIndustryDescription": "Franchise",
        "taxIndustryLabel": "Franchise",
        "taxControlReferenceCounter": 1,
        "transactionOn": null
    },
    {
        "taxTypeId": "STAT",
        "taxIndustryDescription": "State",
        "taxIndustryLabel": "State",
        "taxControlReferenceCounter": 1,
        "transactionOn": null
    },
    {
        "taxTypeId": "CNTY",
        "taxIndustryDescription": "County",
        "taxIndustryLabel": "County",
        "taxControlReferenceCounter": 1,
        "transactionOn": null
    },
    {
        "taxTypeId": "TOWN",
        "taxIndustryDescription": "City",
        "taxIndustryLabel": "City",
        "taxControlReferenceCounter": 1,
        "transactionOn": null
    },
    {
        "taxTypeId": "SCHL",
        "taxIndustryDescription": "School",
        "taxIndustryLabel": "School",
        "taxControlReferenceCounter": 1,
        "transactionOn": null
    }
]

Within the taxControlReference, each key within the taxTables corresponds with a taxTypeId in the taxControl model.

To derive an output based on this data, I am aiming for a structure as follows:

Array<{taxTypeId: string, taxIndustryDescription, options: taxTablesKey[]}>

The process involves the utilization of observables:

// taxControl$ and taxControlReference$ serve as the observables returning data from the aforementioned models
observable$ = CombineLatest([taxControl$, taxControlReference$]).pipe(
    // At this stage, difficulty arises when attempting to map out just the taxControl$, resulting in the final object in the array being repeated multiple times corresponding to the array's length of objects 
)

angular typescript rxjs observable

Answer 1

Answer №1

I'm having trouble understanding some aspects of your issue. Let me point out a few things:

taxControlData$: Observable<any> = combineLatest([
  this.taxControlQuery.taxControlService$, 
  this.taxControlReferenceQuery.taxControlReferenceService$
]).pipe(
  map( ([taxControls, taxTables] : [TaxControl[], TaxTable[]]) => {
    // taxControls is an array (TaxControl[]) 
    // Setting options on an array seems unusual - are you sure about this?
    taxControls.options = taxTables.map(
      // It's unclear what taxTables represents here based on the provided model
      taxTables => taxTables.map(
        // This results in an array of boolean values, how will these be used?
        options => options === taxTables.taxTypeId
      )
    );
    // Remember to return something inside the RxJS map function,
    // Otherwise, it'll result in a stream of void values.
    return /* ??? */ 
  })
)

In general, I'm unsure of the desired outcome. You mentioned wanting the output to resemble:

[
    taxIndustryDescription<string>,
    options<taxTables[]>
]

Is your data always singleton arrays? How would the output change if taxControlReferenceService$ emits new data?

[
   {
        "taxTypeId": "STAT",
        "taxIndustryDescription": "State",
        "taxIndustryLabel": "State",
        "taxControlReferenceCounter": 1,
        "transactionOn": null
    },...
]

What should the updated output look like now?

Update

We still need clarity on your objective. Providing example output matching given input might help. Can you show how the provided data translates into expected output?

This code snippet aims to generate an array following the format you described. It pairs off values from the input:

taxControlData$: Observable<any> = combineLatest([
  this.taxControlQuery.taxControlService$, 
  this.taxControlReferenceQuery.taxControlReferenceService$
]).pipe(
  map( ([taxControls, taxTables] : [TaxControl[], TaxTable[]]) => {
    const output = new Array<any>();
    for(let i = 0; i < taxControls.length; i++){
      output.push({
        taxTypeId: taxControls[i].taxTypeId,
        taxIndustryDescription: taxTables[i].taxIndustryDescription,
        options: [{/*?taxTablesKey?*/},{/*?taxTablesKey?*/},{/*?taxTablesKey?*/}]
      })
    }
    return output;
  })
)

Answer 2

I'm having trouble understanding some aspects of your issue. Let me point out a few things:

taxControlData$: Observable<any> = combineLatest([
  this.taxControlQuery.taxControlService$, 
  this.taxControlReferenceQuery.taxControlReferenceService$
]).pipe(
  map( ([taxControls, taxTables] : [TaxControl[], TaxTable[]]) => {
    // taxControls is an array (TaxControl[]) 
    // Setting options on an array seems unusual - are you sure about this?
    taxControls.options = taxTables.map(
      // It's unclear what taxTables represents here based on the provided model
      taxTables => taxTables.map(
        // This results in an array of boolean values, how will these be used?
        options => options === taxTables.taxTypeId
      )
    );
    // Remember to return something inside the RxJS map function,
    // Otherwise, it'll result in a stream of void values.
    return /* ??? */ 
  })
)

In general, I'm unsure of the desired outcome. You mentioned wanting the output to resemble:

[
    taxIndustryDescription<string>,
    options<taxTables[]>
]

Is your data always singleton arrays? How would the output change if taxControlReferenceService$ emits new data?

[
   {
        "taxTypeId": "STAT",
        "taxIndustryDescription": "State",
        "taxIndustryLabel": "State",
        "taxControlReferenceCounter": 1,
        "transactionOn": null
    },...
]

What should the updated output look like now?

Update

We still need clarity on your objective. Providing example output matching given input might help. Can you show how the provided data translates into expected output?

This code snippet aims to generate an array following the format you described. It pairs off values from the input:

taxControlData$: Observable<any> = combineLatest([
  this.taxControlQuery.taxControlService$, 
  this.taxControlReferenceQuery.taxControlReferenceService$
]).pipe(
  map( ([taxControls, taxTables] : [TaxControl[], TaxTable[]]) => {
    const output = new Array<any>();
    for(let i = 0; i < taxControls.length; i++){
      output.push({
        taxTypeId: taxControls[i].taxTypeId,
        taxIndustryDescription: taxTables[i].taxIndustryDescription,
        options: [{/*?taxTablesKey?*/},{/*?taxTablesKey?*/},{/*?taxTablesKey?*/}]
      })
    }
    return output;
  })
)

Combining the output of two Observables through the CombineLatest method to generate a

Answer №1

Update

Similar questions

Testing the selection of dropdown values in Angular2 using unit tests

Connecting ADFS to your Angular 2 project

Angular 2+: Harnessing the Power of Web Tokens

Debugging in Next.js and Sanity.io: "Client Components do not support async/await yet, only Server Components."

What is the best way to implement Angular 2 slash routes in conjunction with Node Express?

In Typescript, an index signature parameter can only be of type 'string' or 'number'

Utilizing Angular to augment existing items in local storage

The issue with Angular 2's Ng style is that it does not properly remove the old style when there is a change

Angular 5 dynamically updates its model after the completion of events

The name 'Map' cannot be located. Is it necessary to alter your target library?

Dropdown with grouped options in Angular PrimeNG - displaying data other than the default label/value pair

Creating consistency in tab spacing within a text area

Warning from Google Chrome: Ensure password forms include optional hidden username fields for improved accessibility

Angular Compilation Errors Caused by Component Inheritance

I'm interested in retrieving just the ID specifically when filtering in Angular

Does anybody have information on the Namespace 'global.Express' not having the 'Multer' member exported?

The data in ag Grid does not display until all grid events have been completed

Exploring the Concept of Template Element Recursion in Angular JS 2

Error TRPCClient: The unexpected presence of the token "'<'", ""<!DOCTYPE "... invalidates the JSON format within Next.JS

Ecommerce Template for Next.js