Angular 2 - Create array of objects from FormArray

Question

I have a form that contains a FormArray of people. The people array then contains a FormArray of addresses which gives me the following JSON:

{
  "people": [
    {
      "lastName": "Last-1",
      "firstName": "First-1",
      "middleName": "",
      "addresses": [
        {
          "street": "Person1 - Address1"
        },
        {
          "street": "Person1 - Address2"
        }
      ]
    },
    {
      "lastName": "Last-2",
      "firstName": "Last-2",
      "middleName": "",
      "addresses": [
        {
          "street": "Person2 - Address1"
        }
      ]
    }
  ]
}

Now I'm trying to take these "people" from the form and create an array of Person objects

export class ReportPerson {    
    lastName: string = '';
    firstName: string = '';
    middleName: string = ''; 
    addresses: PersonAddress[];
}
export class PersonAddress {
        street: string = '';   
}

When I use console.log(form.get('people').value); I get the following result:

(2) [{…}, {…}]0: {lastName: "Last-1", firstName: "First-1", middleName: "", 
addresses: Array(2)}
              1: {lastName: "Last-2", firstName: "Last-2", middleName: "", 
addresses: Array(1)}length: 2__proto__: Array(0)

But no matter how I try to get the data, it says that my list is undefined. For example, the following returns that it can't read "lastName" of undefined.

 save(form: any) {
        var reportPersonList: ReportPerson[] = new Array();
        var people = form.get('people');

        for (let i = 0; i < people.length; i++) {
            console.log(people[i].lastName);
       }
    }
}

My question is, what is the proper syntax to create an array of people objects from the data in the FormArray? I know it's something basic that I'm missing, but I'm used to C# and new to Typescript/Angular2.

if your able to get the value in console then using form.get('people').value and then use the same in var people = form.get('people').value. — Sreemat
– Sreemat, Commented Aug 10, 2017 at 6:11
There is no typo that I can see. Intellisense does not show any. And I can add/remove from my arrays without error. I can get the value and the length of 'people' but as soon as I try to iterate through the array and access the properties, I get the undefined error. — Chachi_Arcola
– Chachi_Arcola, Commented Aug 10, 2017 at 11:49
Where do you print this console.log(form.get('people').value) — Sreemat
– Sreemat, Commented Aug 10, 2017 at 12:35
I'm just printing to the console to debug for now. My goal is to make an array of people. — Chachi_Arcola
– Chachi_Arcola, Commented Aug 10, 2017 at 14:40

Chachi_Arcola · Accepted Answer · 2017-08-14 02:12:20Z

For anyone else that runs across this problem, I was able to solve it by creating a new form array from the values of the 'people' form array. Then using form array functions to map the form values to the object values. Then I repeated the process for the array of addresses.

save(form: any) {
    var reportPersonList: ReportPerson[] = new Array();

    var people = form.get('people') as FormArray;

    for (let i = 0; i < people.length; i++) {
        var p = new ReportPerson;
        p.lastName = people.at(i).get('lastName').value;
        p.firstName = people.at(i).get('firstName').value;
        p.middleName = people.at(i).get('middleName').value;
        var addresses = people.at(i).get('addresses') as FormArray;
        for (let j = 0; j < addresses.length; j++) {
            var a = new PersonAddress;
            a.street = addresses.at(j).get('street').value;

            p.addresses.push(a);
        };
        reportPersonList.push(p);
    }
    this.reportFormDataService.setReportPeople(reportPersonList);

}

Zze · Accepted Answer · 2017-08-14 02:26:48Z

1

Glad that you got it working!

Thought I would post how I would've done this though.

let json = {
  "people": [
    {
      "lastName": "Last-1",
      "firstName": "First-1",
      "middleName": "",
      "addresses": [
        {
          "street": "Person1 - Address1"
        },
        {
          "street": "Person1 - Address2"
        }
      ]
    },
    {
      "lastName": "Last-2",
      "firstName": "Last-2",
      "middleName": "",
      "addresses": [
        {
          "street": "Person2 - Address1"
        }
      ]
    }
  ]
}

// for each person in the array, return a class instantiate
json.people.map(person => {
  return new Person().deserialize(person);
});

// 
class Person(){

  public lastName: string;
  public middleName: string;
  public firstName: string;
  public addresses: Array<any>

  constructor(){
    this.addresses = new Array<string>();
  }

  // note you could of just used the constructor,
  // but its a personal preference to have a serialize and deserialize for data coming from the server in a json object type.
  deserialize(data: any){
    this.lastName = data.lastName;
    this.firstName = data.firstName;
    this.middleName = data.middleName;
    this.addresses = data.addresses;
  }
}

answered Aug 14, 2017 at 2:26

Zze

18.9k14 gold badges95 silver badges125 bronze badges

1 Comment

Chachi_Arcola Over a year ago

That does seem a whole lot cleaner. I'll give it a shot. Thanks!

Collectives™ on Stack Overflow

Angular 2 - Create array of objects from FormArray

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related