Join With AngularFire 2

Question

I have seen similar questions asked, but those questions had slightly different data structures to what I'm dealing with. I've looked at:

• Joining data between paths based on id using AngularFire

• AngularFire2: Perform 'Joins' on FirebaseListObservables using RxJS .map()

This is my data structure:

{
  "samples": {
    "24084": {
      "addInfo": "TEST",
      "datePrinted": "8/11/2017 9:42:57 AM",
      "equipment": "GR028",
      "hmisNumber": "100E",
      "lotNumber": "GR0030C659-JM",
      "productionNumber": "PN0034781",
      "userName": "MCorbett"
    },
    "24342": {
      "addInfo": "test",
      "datePrinted": "8/15/2017 11:51:55 AM",
      "equipment": "GR025",
      "hmisNumber": "100",
      "lotNumber": "BR0010P835",
      "productionNumber": "PN0035616",
      "userName": "MCorbett"
    }
  },
  "scans": {
    "-Krlb3tv3oFPtYZp2ErX": {
      "inTime": 1502997139131,
      "sampleId": "24342"
    },
    "-KrlbdbCT0us6xE9POm3": {
      "inTime": 1502997289573,
      "outTime": 1502997292524,
      "sampleId": "24342"
    },
    "-Krlc3vsjiQ9czWYGvA9": {
      "inTime": 1502997401784,
      "outTime": 1502997404864,
      "sampleId": "24084"
    }
  }
}

As you can see, Samples to Scans have a one to many relationship. What I need to do is populated a table with Sample data joined to scan data. It needs to look like this:

"24342": {
  "addInfo": "test",
  "datePrinted": "8/15/2017 11:51:55 AM",
  "equipment": "GR025",
  "hmisNumber": "100",
  "lotNumber": "BR0010P835",
  "productionNumber": "PN0035616",
  "userName": "MCorbett",
  "inTime": 1502996197213
}

I need to grab all Scans where outTime is undefined, and then join it to it's corresponding Sample data. Here is what I have tried so far:

  // Get samples that have a scan where inTime is populated but outTime is not
  getOpenSamples() {
      console.log('getopensmaples stareted')
      let scanWithSampleList = this.scanSvc.getScansList({
              orderBy: 'outTime',
              startAt: ''
          })
          .switchMap(scans => {
              let sampleObservables = scans.map(scan => this.getSample(scan.sampleId));
              console.log("insisde");
              return sampleObservables.length === 0 ?
                  Observable.of(scans) :
                  Observable.combineLatest(sampleObservables, (samples) => {
                      scans.forEach((scan, index) => {
                          scan.productionNumber = samples[index].productionNumer;
                          scan.lotNumbner = samples[index].lotNumber;
                      });
                      return scans;
                  });
          });
  }

This gives me this error:

ERROR in C:/Users/corbetmw/workspace/angular/sample-time-tracking/src/app/samples/shared/sample.service.ts (82,54): Propert y 'productionNumer' does not exist on type '{}'.

What am I doing wrong here? This seems like a simple enough thing, but I'm having a lot of trouble with it. Do I need to change my data structure? Should I make a component that gets the Scans with undefined outTime and stick it in the table with a parent that can pass the sample ID, or vice versa?

Answer 1

I was able to find a solution which returns an observable of type Scan<> with a single Scan inside of it.

I have this function:

  getOpenScans() {
      const scansList = this.db.list('/scans', ref => ref.orderByChild('outTime').endAt(null));
      return scansList.snapshotChanges().map(arr => {
          return arr.map(snap => Object.assign(snap.payload.val(), {
              $key: snap.key
          }))
      })
  }

Then, I have this guy:

  getOpenSamples() {
    let openScans = this.scanSvc.getOpenScans();

    let fullSamples = openScans.map(scans => {
      for (let scan of scans) {
        scan.sample = this.getSample(scan.sampleId);
      }
      return scans;
    });
    
    //fullSamples.subscribe(samples => console.log(samples));
    return fullSamples;
  }

I am now trying to implement this solution with MatTable in Material2.