How to make a nested data model in angular/typescript

Question

In my project i want to make a model contains nested data based on mutiple api calls.(i mean after calling api based on ids calling another api on click);

First API call.

   [
       {
           id: 1,
           name: "user 1"
       },
       {
           id: 1,
           name: "user 2"
       }
   ]

By using these parent ids i am calling another api for the childrens. for example id = 1

   [
       {
           id: 3,
           name: "child 1",
           parentId: 1
       },
       {
           id: 3,
           name: "child 2",
           parentId: 1
       }
   ]

Again using these child ids calling another api for sub childs.

   [
       {
           id: 5,
           name: "baby 1",
           parentId: 3
       },
       {
           id: 5,
           name: "baby 2",
           parentId: 3
       }
   ]

and this is further.... calling..

so finally the final data like this

   [
       {
            id: 1,
            name: "user 1",
            children:    [
               {
                   id: 3,
                   name: "child 1",
                   parentId: 1,
                   children: [
                        {
                           id: 5,
                           name: "baby 1",
                           parentId: 3,
                           children: // further
                        },
                        {
                           id: 5,
                           name: "baby 2",
                           parentId: 3,
                           children: // further
                        }
                   ]
               },
               {
                   id: 3,
                   name: "child 2",
                   parentId: 1,
                   children: // same structure
               }
           ]
       },
       {
           id: 1,
           name: "user 2",
           // same structure
       }
   ]

export interface IUser {
  id?: any;
  name?: string; 
  children?: // here what i need to do
  parentId?: any;
  active: boolean;
}

export class User implements IUser {
  public id?: any;
  public name?: string;
  public children?: // here what i need to do
  public parentId?: any;
  public active = false;

  constructor(data: IUser) {
    Object.assign(this, data);
  }
}

@IngoBürk as in my question how to initialize children data in my model. — Akash Kumar Verma
– Akash Kumar Verma, Commented Aug 24, 2020 at 8:39

lovis91 · Accepted Answer · 2020-08-24 08:27:55Z

3

If think this is simple as :

export interface Model {
   id: number;
   name: string;
   children?: Model[];
   parentId?: number;
}

answered Aug 24, 2020 at 8:27

lovis91

2,1692 gold badges16 silver badges26 bronze badges

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

Comments

MoxxiManagarm · Accepted Answer · 2020-08-24 09:04:44Z

Try something like this

interface PersonModel {
   id: number;
   name: string;
   children?: PersonModel[];
   parentId?: number;
}

const persons: PersonModel[] = [
  {
    id: 1,
    name: "user 1"
  },
  {
    id: 2,
    name: "user 2"
  },
{
    id: 3,
    name: "child 1",
    parentId: 1
  },
  {
    id: 4,
    name: "child 2",
    parentId: 1
  },
  {
    id: 5,
    name: "baby 1",
    parentId: 3
  },
  {
    id: 6,
    name: "baby 2",
    parentId: 3
  }
];

function getByParent(id?: number): Observable<PersonModel[]> {
  return of(persons.filter((person: PersonModel) => person.parentId === id));
}

function getByParentNested(id?: number): Observable<PersonModel[]> {
  return getByParent(id).pipe(
    concatAll(),
    switchMap((person: PersonModel) => forkJoin(of(person), getByParentNested(person.id))),
    map(([person, children]) => ({ ...person, children})),
    toArray(),
  );
}

getByParentNested(undefined).subscribe(console.log);

Stackblitz: https://stackblitz.com/edit/rxjs-tupsnf?file=index.ts

Collectives™ on Stack Overflow

How to make a nested data model in angular/typescript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related