Stack Exchange
associate element with ManyToMany relationship in Spring + Angular
In my project I have two classes with the ManyToMany relationship between CodeA and CodeB.
In backend this is the situation:

CodeA.java

@Entity
@Table(name = "codeA")
public class CodeA {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private long id;

    @Column
    private String code;

    @ManyToMany(cascade = CascadeType.ALL)
    private CodeB associatedCode;

    //BELOW GET AND SET...
}


CodeB.java

@Entity
@Table(name = "codeB")
public class CodeB {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private long id;

    @Column
    private String code;

    //BELOW GET AND SET...
}

Then in DB, I've entered this data:
code_a
 -----------
| id | code |
 -----------
| 1  |  A1  |
 -----------
| 2  |  A2  |
 -----------
| 3  |  A3  |
 -----------

code_b
 -----------
| id | code |
 -----------
| 1  |  a1  |
 -----------
| 2  |  a2  |
 -----------
| 3  |  a3  |
 -----------
| 4  |  a4  |
 -----------

code_a_associated_code
 --------------------------------
| code_a_id | associated_code_id |
 --------------------------------
| 1         |  1                 |
 --------------------------------
| 1         |  2                 |
 --------------------------------
| 2         |  1                 |
 --------------------------------
| 2         |  2                 |
 --------------------------------
| 2         |  3                 |
 --------------------------------
| 2         |  4                 |
 --------------------------------
| 3         |  1                 |
 --------------------------------


In frontend there is the class associated:

CodeA.ts

export class CodeA {
  id: number
  code: string
}


CodeB.ts

export class CodeB {
  id: number
  code: string
}

How can I manage in my summary page, a select where according to the CodeA I have, the CodeBs are among the options? I tried this but it doesn't work.

summary.ts

    codeA: CodeA[]
    codeB: CodeB[]
    
    this.service.getCodeA().subscribe(data => {
       this.codeA = data;
    })
    this.service.getCodeB().subscribe(data => {
       this.codeB = data;
    })


summary.html



<div *ngFor="let c of CodeA">{{c.code}}</div>

<select class="form-control">
<option *ngFor="let a of CodeB">{{a.code}}</option>
</select>




Can u please be clear about what is your question ? what are u trying to do and what is not working ?

@YogendraR , the data is not enter in the select. If there is A1 code, the option in select is empty

I guess you have to debug/tell us some more. Is the backend returning anything, is the property assigned in getCodeB().subscribe? Use console.log(). Since you need both A and B you'd normally use forkJoin. Your entity seems wrong, with ManyToMany you'd need a List (or Set). I have a feeling it would be better to have an array of B as part of A in the frontend also
