Angular 4 return value in undefined

Question

This is my current code. How can I return rowData value in this case?

private createRowData() {
const rowData: any[] = [];

this.http
  .get(`/assets/json/payment.json`)
  .toPromise()
  .then(response => response.json())
  .then(data => {
    data.items.map(elem => {
      rowData.push({
        id: elem.id,
        total_amount: elem.total_amount,
        status: elem.status,
        sent: elem.sent,
      });
    });
  });
return rowData;}

I had tried to console rowData before return and it gave me undefine.

Possible duplicate of How to return the response from an asynchronous call? (TL;DR: You can't. You need to return the promise created by the last .then call) — Joe Clay
– Joe Clay, Commented Nov 15, 2017 at 9:53

Faly · Accepted Answer · 2017-11-15 10:08:37Z

2

Your method should return a promise of the transformed data. In the last then callback, you should return the transformed response. You can rely on the implicit return of arrow function to do that. You don't need the variable rowData because array.proptype.map returns a new array which each value in it is transformed. All you have to do is:

private createRowData() {
   return this.http    // Return the promise
    .get(`/assets/json/payment.json`)
    .toPromise()
    .then(response => response.json())
    .then(data => data.items.map(elem => ({   // Return the transformed data by the then callback
        id: elem.id,
        total_amount: elem.total_amount,
        status: elem.status,
        sent: elem.sent,
     })));
}

Then you can use this methode like below:

this.createRowData().then(rowData => console.log(rowData))

edited Nov 15, 2017 at 10:08

answered Nov 15, 2017 at 9:56

Faly

13.4k2 gold badges21 silver badges39 bronze badges

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

1 Comment

Jim Over a year ago

Get it. Thank you for your help! :)

Aamir Khan · Accepted Answer · 2017-11-15 13:00:42Z

You are making an asynchronous http call. The call is incomplete when the return rowData; line is executed, and hence you get undefined. To resolve this, return a promise from your function and use a .then() call to retrieve rowData from wherever you are calling your function.

private createRowData() {
  const rowData: any[] = [];

  return this.http  // <- Return promise
   .get(`/assets/json/payment.json`)
   .toPromise()
   .then(response => response.json())
   .then(data => {
     data.items.map(elem => {
      rowData.push({
        id: elem.id,
        total_amount: elem.total_amount,
        status: elem.status,
        sent: elem.sent
      });
      return rowData;
    });
  });
 //return rowData; // <- This is undefined because the call isn't complete yet
}

ngOnInit() {
  this.createRowData().then(data => {
    console.log(data) // <- rowData
  });
}

Collectives™ on Stack Overflow

Angular 4 return value in undefined

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related