How do I create an array to store array elements of different data types (different interfaces)?

Question

I have a question about 2D arrays in typescript.

I want to create an array containing arrays where each element has a different data type, but the data types of these elements are all different interfaces.

As you can see in the figure, the four variables (elements) that will be included in the 'answer' variable are member, publication, research, and courses in turn. These consist of a Member[ ] interface, a Publication[ ] interface, a Research[ ] interface, and a Course[ ] interface, respectively.

this.answer = [this.member,this.publication,this.research,this.course]; I tried the same way as , but it didn't work the way I wanted it to. How can I store variables with different interface characteristics in 'this.answer' variable?

As a result of experimentation, elements such as 'this.member' have values well, but there seems to be a problem in the process of putting these elements into 'this.answer'.

Thank you!

import { Component, Input, OnInit } from '@angular/core';
import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { Subject, Observable } from 'rxjs';
import { MemberService } from 'src/app/services/member.service';
import { Member } from 'src/app/models/member';
import { PublicationService } from 'src/app/services/publication.service';
import { Publication } from 'src/app/models/publication';
import { ResearchService } from 'src/app/services/research.service';
import { Research } from 'src/app/models/research'; 
import { CourseService } from 'src/app/services/course.service';
import { Course } from 'src/app/models/course';

@Component({
  selector: 'app-survey',
  templateUrl: './survey.component.html',
  styleUrls: ['./survey.component.scss']
})

export class SurveyComponent implements OnInit {

  //member.component.ts에서 modalRef.componentInstance.renderPage = page; 를 통해 전달된 renderPage 변수를 받아옴!
  //renderPage 변수에는 (member/publication/research/course/event/banner) 중 하나가 들어있다.
  //이 변수의 값에 따라서, Survey 컴포넌트의 html 파일을 조금씩 다르게 보여줘야 한다.

 @Input() public renderPage;

  array1 : string[] = ['member','publication','research','course','event','banner'];
  answer;
  ren;

  member : Member[]=[];
  publication :Publication[]=[];
  research : Research[]=[];
  course : Course[]=[];
  
  constructor(
    public modal: NgbActiveModal,
    private ms: MemberService, 
    private ps: PublicationService, 
    private rs: ResearchService, 
    private cs: CourseService) { 

    this.renderPage = this.renderPage;
  }


  ngOnInit(): void {

    this.ms.getAll().subscribe(member => {
      this.member = member.sort((a, b) => a.index - b.index);
    });
    this.ps.getAll().subscribe(publication => {
      this.publication = publication.sort((a, b) => a.id - b.id);
    });
    this.rs.getAll().subscribe(research => {
      this.research = research.sort((a, b) => a.id - b.id);
    });
    this.cs.getAll().subscribe(course => {
      this.course = course.sort((a, b) => a.id - b.id);
    });

    //I have a problem in this code..!!
    this.answer = [this.member,this.publication,this.research,this.course]; 
    
    //this.answer1.forEach((element,idx)=>console.log(idx+ '||'+ element));

    this.array1.forEach(
      (element, idx) => {
        if(element === this.renderPage){
          this.ren = this.answer[idx];
        }
      }
    );
  }
  
}

The four different interfaces look like this. Variables within an interface are all different for each interface.

export interface Member {
  id: number;
  name: string;
  role: string;
  degree: string;
  interest: string;
  employment: string;
  email: string;
  website: string;
  enrolled_year: number;
  enrolled_month: number;
  graduation_year: number;
  is_alumni: boolean;
  image_path: string;
  image_org_name: string;
  index: number;
  updated?: boolean;
}

Is answer always a tuple of 4 elements? If so you can define its type as answer: [Member[], Publication[], Research[], Course[]] — Aviad P.
– Aviad P., Commented Aug 1, 2021 at 8:13

Apoorva Chikara · Accepted Answer · 2021-08-01 07:56:33Z

1

You can use union type in Typescript like below:

public answer: Array< Member|Publication|Research|Course> = []

For more details check this: Typescript

answered Aug 1, 2021 at 7:56

Apoorva Chikara

8,8033 gold badges24 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rebai Ahmed Over a year ago

Nice one , or he can use tuple type that can store data with variety of types

Apoorva Chikara Over a year ago

Yes, only if it will contain these four types only.

user12251399 · Accepted Answer · 2021-08-01 08:50:20Z

0

I think using dictionary with forkJoin will be an optimal way to solve your problem, because currently you are mixing async and sync code in ngOnInit.

Make sure you have Rxjs 6.5 version

Once all sources emit an value and completes, you could destruct response object and apply your code without having to worry about array order

forkJoin(
  // as of RxJS 6.5+ we can use a dictionary of sources
  {
    ms: this.ms.getAll(),
    ps:  this.ps.getAll(),
    rs: this.rs.getAll(),
    cs: this.cs.getAll()
  }
).subscribe(({member, publication, researc, course}) => {
  // Your code here
})

forkJoin docs

answered Aug 1, 2021 at 8:50

user12251399

Collectives™ on Stack Overflow

How do I create an array to store array elements of different data types (different interfaces)?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related