I have problem in RX js observable, where I am not able to get the desired output from combineLatest operator

Below observable does not give the right results

 customerWithProjects$ = combineLatest([this.customers$, this.projects$]).pipe(
    map(([customers, projects]) => {
      return projects.map((project) => {
        const customer = customers.find(c => c.id === project.id);
        return {
          ...project,
          id : project.id,
          Name : project.projectName,
          Cost : project.itemCost,
          custName: customer.first_name

        };
      });
    })
  );

In my display I do not get customer.first_name

<h2>Projects with Customer Information </h2>
  <div *ngIf="customerWithProjects$ | async as custprojects">
  <mat-list>
  <mat-list-item *ngFor="let custproject of custprojects ">
    {{ custproject.id }}
    {{ custproject.projectName }}
    {{ custproject.itemCost }}
    {{ custproject.custName }}
  </mat-list-item>
</mat-list>

</div>

I was trying to play with different values , but not getting the combine stream working.

so far I see that project -> id == 1 (Number) and customers -> id === "1" String

and in find callback 1 === "1" is false and nothing is found

I would modify data a bit and would add customerId to project in your place which would be reference to a customer. this way you will be able to handle the data in a better way

if you want an easy fix, just change === to == in the find callback