# Passing an array from service/provider to page

**URL:** <https://forum.ionicframework.com/t/passing-an-array-from-service-provider-to-page/63452>\
**Category:** ionic-v3\
**Created:** [September 14, 2016, 6:56pm UTC](https://forum.ionicframework.com/t/passing-an-array-from-service-provider-to-page/63452 "2016-09-14T18:56:58Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![ivanwashere](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ivanwashere/32/94101_2.png) [@ivanwashere](https://forum.ionicframework.com/u/ivanwashere)\
**Post date:** [September 14, 2016, 6:56pm UTC](https://forum.ionicframework.com/t/passing-an-array-from-service-provider-to-page/63452/1 "2016-09-14T18:56:58Z")

</div>

I am trying to pass an array from service on to a page.

Service.ts

> ```
> public getAmount() {
> this.storage.query("SELECT amount FROM budget").then(
> data => {
> this.amount = [];
> if (data.res.rows.length > 0) {
> for (var i = 0; i < data.res.rows.length; i++) {
> let item = data.res.rows.item(i);
> this.amount.push(Number(new item.amount));
> }
> }
> });
> return this.amount;
> }
> 
> ```

on the page i simple call for the service method as so:  
page.ts

> data: this.Service.getAmount();

this should be simple but for some reason it doesn’t work i get this error  
EXCEPTION: Error: Uncaught (in promise): TypeError: item.amount is not a constructor

it appears that there are two problems first item.amount can’t add value to an array  
and second array cant be pushed on to the page  
any ideas??

---

<div class="post-metadata">

**Author:** ![skoff](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/skoff/32/100985_2.png) [@skoff](https://forum.ionicframework.com/u/skoff)\
**Post date:** [September 14, 2016, 7:32pm UTC](https://forum.ionicframework.com/t/passing-an-array-from-service-provider-to-page/63452/2 "2016-09-14T19:32:40Z")

</div>

> [@ivanwashere](#):
>
> this.amount.push(Number(new item.amount));

this line should not contain the word “new” just write item.amount instead!

```auto
this.amount.push(item.amount);
```

Try that and let me know!

---

<div class="post-metadata">

**Author:** ![ivanwashere](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ivanwashere/32/94101_2.png) [@ivanwashere](https://forum.ionicframework.com/u/ivanwashere)\
**Post date:** [September 14, 2016, 8:09pm UTC](https://forum.ionicframework.com/t/passing-an-array-from-service-provider-to-page/63452/3 "2016-09-14T20:09:30Z")

</div>

thank you for the suggestion, it passed the array well sort of

no errors pop up but now i just have to figure out why is the array empty 😕

---

<div class="post-metadata">

**Author:** ![skoff](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/skoff/32/100985_2.png) [@skoff](https://forum.ionicframework.com/u/skoff)\
**Post date:** [September 14, 2016, 8:11pm UTC](https://forum.ionicframework.com/t/passing-an-array-from-service-provider-to-page/63452/4 "2016-09-14T20:11:24Z")

</div>

because you’re in an async call when you query your storage. so this.amount exist for the time the query is executed.

```auto
 public getAmount() {
  return this.storage.query("SELECT amount FROM budget");
}
```

then on the other side where you call your service this is where you’ll go through your array returned and fill up your array to display it to the UI.

```auto
this.service.getAmount().then(function(data) {
  this.amount = data;
});
```

something like that. Sorry my code is not explicit it’s been a while since i’ve played with typescript etc.

hope this helps!

---

<div class="post-metadata">

**Author:** ![ivanwashere](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ivanwashere/32/94101_2.png) [@ivanwashere](https://forum.ionicframework.com/u/ivanwashere)\
**Post date:** [September 14, 2016, 8:39pm UTC](https://forum.ionicframework.com/t/passing-an-array-from-service-provider-to-page/63452/5 "2016-09-14T20:39:25Z")

</div>

it did help a lot thanks ,  
it did work to generate an array with the data from the db but the array is weird

placed in service.ts

> public getAmount() {  
> return this.storage.query(“SELECT amount FROM budget”);  
> }

on page.ts

> ```
> public passAvgWeek() {
> let amount = new Array();
> this.Service.getAvgWeek().then(
> data => {
> if (data.res.rows.length > 0) {
> for (var i = 0; i < data.res.rows.length; i++) {
> let item = data.res.rows.item(i);
> amount.push(Number(item.mount));
> }
> }
> });
> //amount = [5,9,6,5,4,7,6,4,7];
> return amount;
> }
> 
> ```

to test i just call it to consol log

> console.log(this.passAvgWeek());

and get this weird array it shows empty brackets and the correct data below

![image](https://global.discourse-cdn.com/ionicframework/original/3X/a/4/a40efbe27b8a442b1303dbc0cc8e928fa3078c6d.jpg)

but then when i uncomment this test line - amount = [5,9,6,5,4,7,6,4,7];  
i get a proper array  
 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/5/1/5199f1ea66398e16f59260a7ea845254653f8a97.jpg)

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [September 14, 2016, 8:50pm UTC](https://forum.ionicframework.com/t/passing-an-array-from-service-provider-to-page/63452/6 "2016-09-14T20:50:12Z")

</div>

You’re trying to treat asynchronous code as if it were synchronous. Down that road lies nothing but pain. Don’t expect `passAvgWeek` to return actual data. It can’t and won’t, no matter what you try to do. It can return a `Promise<Number[]>` using the core of your `then` clause (which should be where `amount` is created and returned from, not outside of it). You cannot expect anything meaningful by logging what `passAvgWeek` itself returns, you need to do something like:

```auto
passAvgWeek().then((week) => {
  console.log(week);
});

```

---

<div class="post-metadata">

**Author:** ![ivanwashere](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ivanwashere/32/94101_2.png) [@ivanwashere](https://forum.ionicframework.com/u/ivanwashere)\
**Post date:** [September 14, 2016, 9:27pm UTC](https://forum.ionicframework.com/t/passing-an-array-from-service-provider-to-page/63452/7 "2016-09-14T21:27:58Z")

</div>

So what i am getting from your response is my current approach is no good, that much is obvious 🙂

but i don’t understand the pseudo code you posted  
could you elaborate a bit more on it

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [September 14, 2016, 9:31pm UTC](https://forum.ionicframework.com/t/passing-an-array-from-service-provider-to-page/63452/8 "2016-09-14T21:31:35Z")

</div>

```auto
passAvgWeek(): Promise<Number[]> {
  return this.Service.getAvgWeek().then((data) => {
    let amount = [];
    // build amount from data
    return amount;
  });
}

passAvgWeek().then((week) => {
  // only in here can we access the actual "amount" array that was built in passAvgWeek()
});

```

---

<div class="post-metadata">

**Author:** ![ivanwashere](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ivanwashere/32/94101_2.png) [@ivanwashere](https://forum.ionicframework.com/u/ivanwashere)\
**Post date:** [September 14, 2016, 9:54pm UTC](https://forum.ionicframework.com/t/passing-an-array-from-service-provider-to-page/63452/9 "2016-09-14T21:54:19Z")

</div>

much clearer thank you  
but when i attempt to just build and  
console log the the amount using the code

```
  private passAvgWeek(): Promise<Number[]> {
    return this.Service.getAvgWeek().then((data) => {
      let amount = [];
      if (data.res.rows.length > 0) {
        for (var i = 0; i < data.res.rows.length; i++) {
          let item = data.res.rows.item(i);
          amount.push(Number(item.amount));
        }
      }
      return amount;
    });
  }

```

it returns a bunch of syntax errors on this part, do i need to declare this "week’ somewhere

```
 line 52: passAvgWeek().then((week) => {
                 // only in here can we access the actual "amount" array that was built in passAvgWeek()
                 console.log(amount);
                 });

```

‘{’ or ‘;’ [expected.at](http://expected.at) line 52 col 16

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [September 14, 2016, 10:03pm UTC](https://forum.ionicframework.com/t/passing-an-array-from-service-provider-to-page/63452/10 "2016-09-14T22:03:58Z")

</div>

I don’t know what the context is for your “line 52”, but a couple of things: since `passAvgWeek` is private, you’ll probably have to be calling it as `this.passAvgWeek`. Also, when you’re inside the “then” clause, “week” is going to be the array you returned as “amount”. It won’t be called “amount” any more at that point.

---

<div class="post-metadata">

**Author:** ![ivanwashere](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ivanwashere/32/94101_2.png) [@ivanwashere](https://forum.ionicframework.com/u/ivanwashere)\
**Post date:** [September 14, 2016, 10:19pm UTC](https://forum.ionicframework.com/t/passing-an-array-from-service-provider-to-page/63452/11 "2016-09-14T22:19:35Z")

</div>

changed passAvgWeek to public for simplicity  
changed amount in console log to week but still the sintakse error just won’t let me build

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/2/1/218b8c0e122e82464b3eccab5e16dcdef3e950bd.jpg)

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [September 14, 2016, 10:37pm UTC](https://forum.ionicframework.com/t/passing-an-array-from-service-provider-to-page/63452/12 "2016-09-14T22:37:54Z")

</div>

Public or private, it’s an instance method that must be called via an object reference. There is no implicit “this” in JavaScript.

---

<div class="post-metadata">

**Author:** ![ivanwashere](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ivanwashere/32/94101_2.png) [@ivanwashere](https://forum.ionicframework.com/u/ivanwashere)\
**Post date:** [September 14, 2016, 10:43pm UTC](https://forum.ionicframework.com/t/passing-an-array-from-service-provider-to-page/63452/13 "2016-09-14T22:43:08Z")

</div>

with or with out this.

sintacs error persists

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/4/8/480b0753a3abaada70266a48ba490b9e00afab0e.jpg)

and wont build

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [September 14, 2016, 11:10pm UTC](https://forum.ionicframework.com/t/passing-an-array-from-service-provider-to-page/63452/14 "2016-09-14T23:10:40Z")

</div>

Move `passAvgWeek` out of the page component and into the service (or modify `getAvgWeek` to include its logic). Declare a `week` property of type `Number[]` in the page component. Initialize it to an empty array immediately.

Then when you want to fill it, you do something like this in the page component:

```auto
this.service.passAvgWeek().then((week) => {
  console.log("got week " + week);
  this.week = week;
});

```

I don’t know when you want to do this: it could be called from someplace like `ngOnInit` or from a function invoked by a click event on a button or something. You can’t just randomly put it in the body of the page component class, though, like you are apparently trying to do now.

---

<div class="post-metadata">

**Author:** ![ivanwashere](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ivanwashere/32/94101_2.png) [@ivanwashere](https://forum.ionicframework.com/u/ivanwashere)\
**Post date:** [September 14, 2016, 11:37pm UTC](https://forum.ionicframework.com/t/passing-an-array-from-service-provider-to-page/63452/15 "2016-09-14T23:37:11Z")

</div>

that was it  
THANK YOU !!! 😃😃