How correctly append to an Array in typescript?

Question

I can't figure out what am I doing wrong, But after making a call to an API, I receive the proper response, but I try to push the response to the array I have. but it returns Undefined.

export interface CustomerInfo {
  firstName: string;
  middleName: string;
  lastName: string;
  dateOfBirth: Date;

}

// if the info comes form parent or not
@Input() customerInfo?: CustomerInfo []=[];

// references would be an array of sting, containing 2 id number, somthing like below: 
refrences = ["jack1","ana12"]

// the getCustomerInfo called on ngOnInit like below:
  ngOnIit() {
    //check if indeed the customerInfo is empty
    if (!this.customerInfo) {
      this.getCustomerInfo()
    }
  } 


getCustomerInfo() {
          for (let reference of references) {
          this.customerService.getCustomerInfo(reference).subscribe(
            value => {
              console.log("customer info ", this.customerInfo)
              console.log("this value ", value)
               this.customerInfo.push(value)
            }, error => {
             console.log(error);
            }
          )
        }

#Update: the issue is the value is log correctly which means I receive the correct response, but the customer info log is undefined. and I don't know why?! The this log includes customerInfo which the value is undefined,

You code does not contain any return statement, so "but it returns Undefined" sounds like the expected result. Please add the code part where you get undefined. — Christoph Lütjen
– Christoph Lütjen, Commented Nov 19, 2021 at 13:04
When defining a variable with the question mark that variable becomes optional and default value for optional variables is undefined. — Blazorman
– Blazorman, Commented Nov 19, 2021 at 13:12
@Blazorman - "default value on optional variables is undefined" true as long as you do net set a default value manually. The initial value in this code is an empty array (and making the variable optional looks like an error). — Christoph Lütjen
– Christoph Lütjen, Commented Nov 19, 2021 at 13:18
Please provide a minimal reproducible example that clearly demonstrates the issue you are facing when you run it. Ideally someone could drop the code into a standalone IDE like The TypeScript Playground (link here!) and immediately get to work solving the problem without first needing to re-create it. So there should be no typos, unrelated errors, or undeclared types or values. — jcalz
– jcalz, Commented Nov 19, 2021 at 14:02
Asker has not done much with the comments. :/ There is not enough information, but my guess is that the Asker expects the array to have the response synchronously, while that response is only available when the callback is called. Then it is a duplicate of How to return the response from an asynchronous call. — trincot
– trincot, Commented Nov 21, 2021 at 19:52

Jeremy Caney · Accepted Answer · 2021-11-22 00:04:01Z

1

The issue was here on ngOnInit, which I had to check if this.customerInfo is Null or undefined; if so, before making a call to the getCustomerInfo API, simply make the customer info equal to an empty array, so that when we get the response back from the call, we can push our response to the array:

ngOnIit() {
  if (!this.customerInfo?.length) {
    this.customerInfo = []
    this.getCustomerInfo()
  } 
}

edited Nov 22, 2021 at 0:04

Jeremy Caney

7,798115 gold badges58 silver badges87 bronze badges

answered Nov 21, 2021 at 21:55

Kim-Jun-Un

833 silver badges13 bronze badges

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

Collectives™ on Stack Overflow

How correctly append to an Array in typescript?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related