0

I want to generate a nested Javascript object, from this object below:

items = {
  "departure": "New York",
  "arrival": "California",
  "stations": [
   { "station": "toto" }, 
   { "station": "titi" },
   ...
  ]
}

heres the html code :

 <div formArrayName="tabls">
                    <div *ngFor="let myGroup of myForm.controls.tabls.controls; let i=index">
                      <div [formGroupName]="i">

                        <div class="row">
                          <div class="col-sm-4" >
                              <div   >
                                  <div class="inner-addonx left-addon header-search" style="float:left;margin-right: 4px;">
                                    <i class="glyphicon  markerx" style="border: 5px solid #FED141"></i>
                                  </div>
                                <span >{{items.departure}}</span> 

                              </div>
                          </div>
                          <div class="col-sm-1" ><img style="    width: 32px;    height: 22px;" src="../assets/img/arrow.svg" ></div>
                          <div class="col-sm-4" >
                              <span *ngIf="items.stations.length > 0">
                                  {{items.stations[0].station}}
                              </span>
                              <span *ngIf="items.stations.length === 0">
                                  {{items.arrival}}
                              </span>
                          </div>

                          <div class="col-sm-3" >
                              <div class="input-group " >

                                  <input type="number" formControlName="price"  value="1000" min="0" step="1" [attr.id]="'textbox'" data-number-to-fixed="2" data-number-stepfactor="100" class="form-control currency" id="c2" /> 
                                  <span class="input-group-addon">Dhs</span>
                            </div>
                          </div>
                        </div>




                        <hr/>
                        <div class="row">
                            <div *ngIf="items?.arrival && items?.departure">
                                <div class="col-sm-4">
                                    <div  style="">
                                        <div class="inner-addonx left-addon header-search" style="float:left;margin-right: 4px;">
                                            <i class="glyphicon  markerx" style="border: 5px solid #63a599"></i>
                                        </div>
                                        <span>{{items.departure}}</span> 

                                  </div>
                                </div>
                                <div class="col-sm-1" >
                                    <img style="    width: 32px;    height: 22px;" src="../assets/img/arrow.svg" >
                                  </div>
                                <div class="col-sm-4" >
                                    <div  style="">
                                        <div class="inner-addonx left-addon header-search" style="float:left;margin-right: 4px;">
                                            <i class="glyphicon  markerx" style="border: 5px solid #F53F5B"></i>
                                        </div>
                                        <span>{{items.arrival}}</span>
                                    </div>
                                </div>

                                <div class="col-sm-3" >
                                    <div class="input-group ">

                                        <input type="number" formControlName="price"  value="1000" min="0" step="1" [attr.id]="'finalprice'" data-number-to-fixed="2" data-number-stepfactor="100" class="form-control currency" id="c2" />
                                        <span class="input-group-addon">Dhs</span>


                                    </div>
                                </div>

                            </div>
                        </div>
                      </div>
                    </div>

                  </div>

the code above populate the json items object to get this result UI

when i clic to submit button i want to generate this object bellow.

what i want to get like this json object :

>  {"tabls":[{"price":20},{"price":10},...]}

the code above populate the json items object to get this result UI

when i clic to submit button i want to generate this object bellow.

what i want to get like this json object :

>  {"tabls":[{"price":20},{"price":10},...]}

Typescript code :

ngOnInit() {
   this.myForm = this._fb.group({

   tabls: this._fb.array([
    this.initArray2()
   ]),
 })
 }
initArray2() {
   return this._fb.group({
   price: [''],
  });
 }

is it possible.

Improve this question
9
  • 1
    There's no such thing as a "JSON Object" Commented Jan 11, 2018 at 9:54
  • what do u mean ? Commented Jan 11, 2018 at 9:55
  • can you please provide your code and html and sample json Commented Jan 11, 2018 at 9:55
  • @Newme That is a link. Click it and learn the correct terminology. Commented Jan 11, 2018 at 9:56
  • @Negi Row, I think the problem is clear, i need to create a json object like this : {"tabls":[{"price":20},{"price":10},...]} Commented Jan 11, 2018 at 9:59
Related questions
1
create a JavaScript object dynamically
0
How to create a dynamic javascript object
5
How to create nested json object in Angularjs
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.