Creating nested form, from given JSON data with N level

Question

I have to build a form in Angular5 based on received JSON data from the backend. The data has nested structure and can contain N level.

For example, level one has {key, type}, and if its type = 'choose', it has another property {key, type, values}, the second level is values has {value, fields}, the third level fields .. etc

Here is a sample of the data https://stackblitz.com/edit/angular-jmgxjd

For now I just need the typescript code, then I will work on the HTML one.

PS: I think it should be reactive form, because the user can add or delete data from the interface

Is the JSON always the same or can it change with multiple levels and multiple choosens? — Swoox
– Swoox, Commented Apr 5, 2018 at 12:12
@Swoox It can change with multiple levels and multiple choosens. for example if the type of the field is 'choose', then this level has second level called values — Hala Ba
– Hala Ba, Commented Apr 5, 2018 at 12:14
I posted an answer plz look at the other answer for reactive form ;) — Swoox
– Swoox, Commented Apr 5, 2018 at 12:37

Jonathan Hall · Accepted Answer · 2018-05-30 13:46:59Z

Okay, bear with me I'm not going to make the code for you I will just give an example with some text.

So what you do is you make a consistent JSON.

fields = [ 
  {key: 'abc', type 'text'}, 
  {key: 'abc', type 'text'}, 
  {key: 'abc', type 'text'}, 
  {key: 'abc', type 'choosen', fields: [
    {key: 'abcd', type 'text'}, 
    {key: 'abc', type 'choosen', fields: [
      {key: 'abcde', type 'text'} 
    ]} 
  ]} 
]

Ok now we have an JSON array that can have multiple layers.

Now for every level you going to make one component in your maincomponent:

<div *ngFor="let field of fields">
  <div *ngIf="field.key !== choosen">
  <-- what ever you want to do with key put here -->
  <subFields [data]="field.fields" (returnData)="returnData($event)" *ngIf="field.key === choosen"><subfields>

The @Input() data: any; will be your next fields in your child component. And @Output() returnData: EventEmitter<any> = new EventEmitter<any>(); to send data back to your parent.

The html of your child component will look like:

<div *ngFor="let field of data">
  <div *ngIf="field.key !== choosen">
  <-- what ever you want to do with key put here -->
  <subFields [data]="field.fields" (returnData)="returnData($event)" *ngIf="field.key === choosen"><subfields>

Umair Jameel · Accepted Answer · 2018-04-05 12:19:49Z

1

I was struggling working on such kind of problem few hours ago. I posted it on another thread and figured out the solution (under my solution heading) and the answer given. This might help you as well.

Add item in dynamic reactive form in Angular

answered Apr 5, 2018 at 12:19

Umair Jameel

1,6733 gold badges31 silver badges59 bronze badges

2 Comments

Hala Ba Over a year ago

Thank you .. I added another levels proccessing stackoverflow.com/a/49674396/4157073

Umair Jameel Over a year ago

N-level should be achieved using recursive function.

Hala Ba · Accepted Answer · 2018-04-05 14:05:52Z

0

I extended this answer anwer from two levels to 4 levels. but still hope that we can convert the code to be able to accept N level (N is unknown), like making it using recursive functions.

Here is the answer with 4 levels https://stackblitz.com/edit/angular-jmgxjd

answered Apr 5, 2018 at 14:05

Hala Ba

2493 silver badges21 bronze badges

1 Comment

Yasir Arefin Over a year ago

Hi @Hala Ba, the stackblitz does not show anything. The component 'HTML' is blank.

Collectives™ on Stack Overflow

Creating nested form, from given JSON data with N level

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related