split json array in angular 2 - json

Question

I am new in angular.when I try to fetch value of textbox which is in a loop getting json array in this format - in the formsubmit method if I do console.log(myForm.value) then I get this big list:
[
{
"product-0":"Voltas",
"avi-0":"5",
"def-0":"0",
"quantity-0":3,
"product-1":"Voltas1",
"avi-1":"5",
"def-1":"1",
"quantity-1":3,
"product-2":"Voltas2",
"avi-2":"5",
"def-2":"7",
"quantity-2":1,
"product-3":"Voltas0",
"avi-3":"5",
"def-3":"6",
"quantity-3":1
}
]
can anyone help me to get json in this format
[
{
"product-0":"Voltas",
"avi-0":"5",
"def-0":"0",
"quantity-0":3
},
{
"product-1":"Voltas",
"avi-0":"5",
"def-0":"0",
"quantity-0":3
}
]
in angular 2.thanks in advance.
this is my html code
<form #myForm="ngForm">
<ion-item *ngFor="let productlist of productlists;let i = index">
<ion-row>
<ion-col width-15><input type="hidden" id="hiddenValue" [(ngModel)]="productlist.product" name="product-{{i}}" /> {{productlist.product}}</ion-col>
<ion-col width-25><input type="hidden" id="hiddenValue" [(ngModel)]="productlist.avi" name="avi-{{i}}"/>{{productlist.avi}}</ion-col>
<ion-col width-25><input type="hidden" id="hiddenValue" [(ngModel)]="productlist.def" name="def-{{i}}"/>{{productlist.def}}</ion-col>
<ion-col width-25 class="add">
<button clear (click)="increment(productlist)"><ion-icon name="add-circle" ></ion-icon></button>
<ion-item><ion-input type="number" [(ngModel)]="productlist.quantity" name="quantity-{{i}}" class="quantity"></ion-input></ion-item>
<button clear (click)="decrement(productlist)"><ion-icon name="remove-circle" ></ion-icon></button>
</ion-col>
</ion-row>
</ion-item>
<button ion-button (click)="formSubmit(myForm.value)">submit</button>
</form>

Answer 1

In your template, you have a single form and a single form can only return a single object.
If you want to split that into multiple objects then you need to write code in your submit method to iterate through 'the big list' and create the structure you want:
[ {} ] => [ {}, {}. {} ]
You would have to search for object.keys.substr(0,6) matching 'product'. This is not a good idea even though it could work.
What I suggest instead is that you create nested forms - one form for each item in the list. I suggest you use reactive forms for this, as it is much easier.
This is because you need to create a component that represents a single product in your array:
[ {}, {}, {} ] =
[{product-item}, {product-item}, {product-item}]
ie:
ProductList-Component has a form with ngFor and inside the ngFor you load multiple children, like this:
<product-item *ngFor="let product of productlists"
[product]="product">
</product-item>
Notice that this product-item component will need an #Input, which is a formGroup, eg:
#Input()
public product: FormGroup;
See this article to learn how you can build this.
In particular see the section that starts with "First idea is obviously to extract a component that represents a single item in the form array"