Mapping two Observables into one from CombineLatest

Question

I have two sets of data:

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
    }
]

In taxControlReference you will see the key for each taxTables value will match to taxTypeId in the taxControl model.

Using this data I am trying to achieve an output in the following model:

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

I am doing this through observables:

// taxControl$ and taxControlReference$ are the observables of returns data from the above models
observable$ = CombineLatest([taxControl$, taxControlReference$]).pipe(
    // this is the part where I am stuck, because if I try to map out just the taxControl$ then it returns last object in the array a total amount of times equal to the length of the array of objects
)

Answer 1

There are a number of things I can't make heads or tails of about your problem. I'll annotate some of them here:

taxControlData$: Observable<any> = combineLatest([
  this.taxControlQuery.taxControlService$, 
  this.taxControlReferenceQuery.taxControlReferenceService$
]).pipe(
  map( ([taxControls, taxTables] : [TaxControl[], TaxTable[]]) => {
    // taxControls is an array (TaxControl[]) 
    // are you sure you want to set options on an array? That would be strange
    taxControls.options = taxTables.map(
      // What is taxTables here? Your model above doesn't reflect this
      taxTables => taxTables.map(
        // Here you're create an array of boolean values. 
        // How do you plan to use those?
        options => options === taxTables.taxTypeId
      )
    );
    // You're still inside the RxJS map function, 
    // you must return something or you'll get a stream of void values. 
    return /* ??? */ 
  })
)

All in all, I'm not sure what you're trying to accomplish. You say you want your output to look like this:

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

Is your data always just singleton arrays? What if taxControlReferenceService$ emits

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

What should the output look like now?

Update

I still don't really know what you want to accomplish. Maybe if you give example output that matches your example input. As in, given the data you've already given, what would the output look like? What parts of the input become what parts of the output?

This should output an array of stuff generally in the format your described. I'm not sure how much that'll help you, but maybe it'll get your started? Here, I'm assuming you want to pair off the values in 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;
  })
)