How to assign an object from an array to a variable?

Question

I'm trying to assign an object from an array, that array will always have 1 object because I have filtered it out when I call the function.

I have my currentAccount: UserAccount[]; array which I know for sure that there is only a single object of type UserAccount. I am trying to assign that single object to a variable object account: UserAccount; itself instead of leaving it as an array. This is my account.component.ts:

currentUser: User;
currentAccount: UserAccount[];
account: UserAccount;

constructor(
  private alertService: AlertService,
  private userService: UserService,
  private authenticationService: AuthenticationService,
) {
  this.authenticationService.currentUser.subscribe(
    x => (this.currentUser = x)
  );
}

ngOnInit(): void {
    this.getCurrentAccount();
    this.currentAccount.map(obj => {
      this.account = obj;
    });
  }

getCurrentAccount() {
    this.userService.getAllUserAccounts().subscribe(
      (data: UserAccount[]) => {
        console.log(data);
        this.currentAccount = data.filter(
          x => x.accountName === this.currentUser.firstName
        );
      },
      error => {
        this.alertService.error('Could not retrieve user account ID');
      }
    );
  }

I have tried .map() and .forEach() in my ngOnInit() to try and extract that object out from the array and map it to my account. I just couldn't seem to get it.

One thing to note however, whenever I use any array methods to try and get the object, my console would throw an error when the page loads:

ERROR TypeError: Cannot read property 'map' of undefined
    at ViewAccountPayableComponent.ngOnInit (view-account-payable.component.ts:35)
    at checkAndUpdateDirectiveInline (core.js:31909)
    at checkAndUpdateNodeInline (core.js:44366)
    at checkAndUpdateNode (core.js:44305)
    at debugCheckAndUpdateNode (core.js:45327)
    at debugCheckDirectivesFn (core.js:45270)
    at Object.eval [as updateDirectives] (ViewAccountPayableComponent_Host.ngfactory.js? [sm]:1)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:45258)
    at checkAndUpdateView (core.js:44270)
    at callViewAction (core.js:44636)

I want to extract it out because I want to use the attributes in UserAccount.

Rogue · Accepted Answer · 2019-10-06 16:09:40Z

1

The reason being that this.currentAccount is empty, the data is being retrieved asynchronously and you are trying to use .map before the data being retrieved.

Move the assignment part inside the logic as follows,

getCurrentAccount() {
    this.userService.getAllUserAccounts().subscribe(
      (data: UserAccount[]) => {
        console.log(data);
        this.currentAccount = data.filter(
          x => x.accountName === this.currentUser.firstName
        );
        this.currentAccount.map(obj => {
         this.account = obj;
        });
      },
      error => {
        this.alertService.error('Could not retrieve user account ID');
      }
    );
  }

edited Oct 6, 2019 at 16:09

Rogue

11.5k6 gold badges51 silver badges74 bronze badges

answered Oct 6, 2019 at 16:08

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

Comments

D Pro · Accepted Answer · 2019-10-06 16:14:48Z

0

this should do the job for you:

this.userService.getAllUserAccounts().subscribe(
  (data: UserAccount[]) => {
    console.log(data);
    if (data) {
      this.account = data.find(x => x.accountName === this.currentUser.firstName);
    };
  },
  error => {
    this.alertService.error('Could not retrieve user account ID');
  }
);

answered Oct 6, 2019 at 16:14

D Pro

1,7961 gold badge10 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to assign an object from an array to a variable?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related