how to add array object inside another array in angular 4

Question

I have created a form using formbuilder. I tried to create data array object into users object, but it's adding as a object inside users array. Below is my code

export class AppComponent  {
  users = [ { "firstname": "ramu", "lastname": "mothukuri", "city": "chennai", "street": "sivan koiil street", "pin": "600024","data":[{"company":"xyz","address":"yyy"}] },
  { "firstname": "ramu", "lastname": "mothukuri", "city": "chennai", "street": "sivan koiil street", "pin": "600024","data":[{"company":"xyz","address":"yyy"}] },
  { "firstname": "ramu", "lastname": "mothukuri", "city": "chennai", "street": "sivan koiil street", "pin": "600024","data":[{"company":"xyz","address":"yyy"}] }
  ]
  myForm: FormGroup;

constructor(private fb: FormBuilder) { 
this.myForm = this.fb.group({
users: this.fb.array([])
})

let formArr = <FormArray>this.myForm.controls.users;
formArr.push(fb.group({
firstname: this.users[0].firstname,
lastname: this.users[0].lastname,
street: this.users[0].street,
data:this.users[0].data
}))
}

  onMy(form){

    console.log(form);
  }
}

I have attached the screen shot please check

But i tried to write the code but i am not getting below is the expected format of json form values

Form values: {

 "users": [
    {
      "firstname": "ramu",
      "lastname": "mothukuri",
      "street": "sivan koiil street",
      "data": [{
        "company": "xyz",
        "address": "yyy"
      }]
    }
  ]
}

Below is the code URL

CODE URL

Below is the format to get, just i want to get data as a array of object [ { "firstname": "ramu", "lastname": "mothukuri", "street": "sivan koiil street", "data":[ { "company": "xyz", "address": "yyy" }] } ] } — ramu
– ramu, Commented Jan 29, 2018 at 19:30
coool, just i want to format data as a array object, currently i got below format-data": { "company": "xyz", "address": "yyy" } expected format is data":[ { "company": "xyz", "address": "yyy" }]. — ramu
– ramu, Commented Jan 29, 2018 at 19:39

Iancovici · Accepted Answer · 2018-01-29 19:46:41Z

2

You need to declare data as a formArray

 let dataArr = new FormArray([]);
    dataArr.push(new FormGroup({
      'company': new FormControl(this.users[0].data[0].company),
      'address': new FormControl(this.users[0].data[0].address)
    }));


    let formArr = <FormArray>this.myForm.controls.users;
    formArr.push(fb.group({
      firstname: this.users[0].firstname,
      lastname: this.users[0].lastname,
      street: this.users[0].street,
      data: dataArr
    }));

edited Jan 29, 2018 at 19:46

answered Jan 29, 2018 at 19:34

Iancovici

5,7317 gold badges41 silver badges61 bronze badges

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

2 Comments

ramu Over a year ago

no, already i got form values, but i need set data as a array of object

ramu Over a year ago

Current format [ { "firstname": "ramu", "lastname": "mothukuri", "street": "sivan koiil street", "data": { "company": "xyz", "address": "yyy" }} ] }, expected format is [ { "firstname": "ramu", "lastname": "mothukuri", "street": "sivan koiil street", "data":[ { "company": "xyz", "address": "yyy" }] } ] }

Manzurul · Accepted Answer · 2018-01-29 19:41:22Z

0

In your form group declaration in the control data create an another formgroup instead of just value.

let formArr = <FormArray>this.myForm.controls.users;
formArr.push(fb.group({
  firstname: this.users[0].firstname,
  lastname: this.users[0].lastname,
  street: this.users[0].street,
  data:this.fb.group({
     company: this.users[0].data.company, 
     address: this.users[0].data.address })
}))
}

This way you will get data as array.

answered Jan 29, 2018 at 19:41

Manzurul

6336 silver badges11 bronze badges

Collectives™ on Stack Overflow

how to add array object inside another array in angular 4

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