How to push data to nested array on angular?-CodePudding

I need some help, I don't how to declare property and parameter from function in my service to push a data my service like this

export class AccountsService {
    accounts = [
        {
          id: 1234556,
          name: 'Master ',
          age: 23,
          gender: 'male',
          professions: 'butcher',
          maritalStat: 'single',
          address: [
            {road: 'Suspendisse St.'},
            {number: '56'},
            {region: 'Los Ríos'},
            {city: 'Armenia'},
            {country: 'Norway'},
          ]
        
        },
        {
          id: 1234556,
          name: 'Zenaida Carey ',
          age: 29,
          gender: 'female',
          professions: 'teacher',
          maritalStat: 'married',
          address: [
            {road: 'Sagittis Road'},
            {number: '5'},
            {region: 'Ríos'},
            {city: 'sidney'},
            {country: 'Australia'},
          ]
        },
      ];

      addAccount(id:number, name:string, age: number, gender:string, professions:string, maritalStat:string, road:string, number:number, region:string, city:string, country:string  ){
        this.accounts.push({id:id, name: name, age: age, gender:gender, professions:professions, maritalStat:maritalStat, [address]:address.name });
      }

in method addAccount, i got error because i don't know how to declare property address because its nested array I hope you can help me.

CodePudding user response：

Create a new account object:

let account = {
    id: id,
    name: name,
    ....
}

In your addAccount method do:

this.accounts = [...this.accounts, account];

Why does it work? We are creating a new account object and leveraging the spread operator of JavaScript we are saying "Give me an array which has ALL of the properties of the current one, AND add the new account object to it".

This spread operator can also be used on nested arrays and is especially powerful once you start using some sort of store (aka redux) architecture as you will be using it a lot to maintain immutability.

Ideally, for cleaner code, I would modify your addAccount method to accept an account object. This way your method signature is far shorter and cleaner.

CodePudding user response：

The way the address works is kind of weird, because it's an array with different types of objects. It would make more sense if the address looked like this:

{
    road: 'Sagittis Road',
    number: 5,
    region: 'Ríos',
    city: 'sidney',
    country: 'Australia',
}

Also read about type safety in so you can use Typescript to it's potential. You should use an interface to define what an account looks like.

Anyway, to get your code working your way - this should work:

addAccount(id: number, name: string, age: number, gender:string, professions: string, maritalStat: string, road: string, number: number, region: string, city: string, country: string): void {
  const account = {
    id, name, age, gender, professions, maritalStat, address: [
          {road},
          {number},
          {region},
          {city},
          {country}
    ]
  };
  this.accounts.push(account);
}