I have an API from which I need to fetch two JSON, and the important one is this:

Relationships :

  {
    "id": 0,
    "source": {
      "id": 0
    },
    "target": {
      "id": 0
    },
    "type": 0
  }

The other brings some events with their labels, and from them I need the name and the ID.

The JSON of the relationships has a source IDand a target IDand a type. And it is used to create relationships between events.

To give an example: let's say I have two events with ID 1 and ID 2 and I want to create a relationship between them, so in source ID I add ID 1 and in target ID I add ID 2 and add a type (1, 2 or 3) to it . And with this you would have a relationship between event 1 with event 2.

Now, I have a table like this:

Where the header of the columns must be the total number of events, in this case there are 3 events. And in the rows the same. Let's say it's a table of nxn events.

The idea is an array where, for example, test event 2 has a relationship to and only test event 1 . Well, in that row there should be a 1 - -. The hyphen means that there is nothing, and the 1 the type of relationship.

To get a list of relations I have the following method:

  private getRelaciones(idRevision){
    this.relacionService.getRelaciones(idRevision).subscribe(
      (data:any) => {
        this.relaciones = data;
        console.log(this.relaciones);
      }
    );
  }

And I am storing the data here:relaciones: any[] = [];

I call the method in the ngOnInit:this.getRelaciones(this.idRevision);

I have the API call method in a Service class:

  getRelaciones(idRevision: string){
    return this.http.get(`${this.URL}/relation?revisionId=${idRevision}`,this.OPCIONES);
  }

But I can't display the data that way, and I've been working on this for many hours.

This is how I have the table right now:

<table class="table table-bordered">

    <thead>
        <tr>
            <th scope="col"></th>
            <th *ngFor="let evento of eventos" scope="col">{{evento['name']}}</th>
        </tr>
    </thead>

    <tbody *ngFor="let evento of eventos">
        <tr>
            <td><b>{{evento['name']}}</b></td>
            <td *ngFor="let relacion of relaciones">{{relacion['type']}}</td>
        </tr>
    </tbody>

</table>

But it shows me the repeated values ​​in each row. Before I had very messy checks, and I've been deleting and editing code for a whole day. Any way to do it?

EDIT 07/09

Applying Legna's answer:

<table class="table table-bordered">
    <thead>
        <tr>
            <th></th>
            <th *ngFor="let evento of eventos" scope="col">{{evento['name']}}</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let relacion of relaciones">
            <th scope="row">{{getNameEvent(relacion['source']['id'])}}</th>
            <td *ngFor="let evento of eventos">
                {{evento['id'] === relacion['target']['id'] ? relacion['type'] : "--" }}
            </td>
        </tr>
    </tbody>
</table>

By changing the order of each iteration I've managed to get a good part of it working:

Well the headers are displayed as they should be, and the content of each cell fits perfectly. But I have the problem: As seen in the image, test event 2 has 2 relations, but it is seen in duplicate. You should see a single row with your relationship type. How do I fix this?

Event:

  {
    "id": 0,
    "code": "string",
    "name": "string",
    "description": "string",
    "image": "string",
    "category": 0,
    "revision": {
      "id": 0
    }
  }

So I load the list of events from the API, in the ngOnInit:

  private cargarEventos(idRevision: string){
    this.eventoService.getEventos(idRevision).subscribe(
      (data: any) => {
        this.eventos = data;
      }
    );
  }

To obtain a list of events, it is necessary to pass an ID of a review as a parameter, but you do not have to pay attention to this.

As I have mentioned in the answer, a relation is made up of two event IDs ( sourceand target) and a type.

Real data:

EVENT DATA:

[ {
    "id": 1,
    "code": "code-007",
    "name": "Evento ejemplo 1",
    "description": "Descripcion cualquiera...",
    "image": "no-img",
    "category": 7
  },
  {
    "id": 2,
    "code": "code-016",
    "name": "Evento ejemplo 2",
    "description": "Descripcion cualquiera...",
    "image": "no-img",
    "category": 10
  },
    {
    "id": 3,
    "code": "code-021",
    "name": "Evento ejemplo 3",
    "description": "Descripcion cualquiera...",
    "image": "no-img",
    "category": 3
  },
    {
    "id": 4,
    "code": "code-089",
    "name": "Evento ejemplo 4",
    "description": "Descripcion cualquiera...",
    "image": "no-img",
    "category": 12
  },
    {
    "id": 5,
    "code": "code-0227",
    "name": "Evento ejemplo 5",
    "description": "Descripcion cualquiera...",
    "image": "no-img",
    "category": 1
  },
    {
    "id": 6,
    "code": "code-007",
    "name": "Evento ejemplo 6",
    "description": "Descripcion cualquiera...",
    "image": "no-img",
    "category": 10
  },
    {
    "id": 7,
    "code": "code-097",
    "name": "Evento ejemplo 7",
    "description": "Descripcion cualquiera...",
    "image": "no-img",
    "category": 80
  }
]

RELATIONSHIP DATA:

[
  {
    "id": 1,
    "source": {
      "id": 1
    },
    "target": {
      "id": 2
    },
    "type": 2
  },
    {
    "id": 2,
    "source": {
      "id": 2
    },
    "target": {
      "id": 4
    },
    "type": 1
  },
    {
    "id": 3,
    "source": {
      "id": 1
    },
    "target": {
      "id": 5
    },
    "type": 3
  },
    {
    "id": 4,
    "source": {
      "id": 5
    },
    "target": {
      "id": 6
    },
    "type": 0
  }
]

I leave you a list of 7 events and 4 relations as if they came to me from the API, that is the data that I have access to show. I must show the name of each event as headers, both in rows and in columns. So it would be a 7x7 table in this case.