# Store the result in a global variable in Aurelia

**URL:** <https://discourse.aurelia.io/t/store-the-result-in-a-global-variable-in-aurelia/3196>\
**Category:** Uncategorized\
**Created:** [January 27, 2020, 11:57pm UTC](https://discourse.aurelia.io/t/store-the-result-in-a-global-variable-in-aurelia/3196 "2020-01-27T23:57:39Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![adn](https://avatars.discourse-cdn.com/v4/letter/a/ce7236/32.png) [@adn](https://discourse.aurelia.io/u/adn)\
**Post date:** [January 27, 2020, 11:57pm UTC](https://discourse.aurelia.io/t/store-the-result-in-a-global-variable-in-aurelia/3196/1 "2020-01-27T23:57:39Z")

</div>

How to access the returned data from getData() in printData? Can I store the data in a global variable?

The following is what I have as an example:

home.js

```auto
export class Home {
    //d;
    constructor() {
        this.printData();
    }
    getData() {
        httpClient.fetch('example.com/api/v')
            .then(response => response.json())
            .then(data => {
                return data;
                //this.d = data;
            });
    }
    printData() {
        var data = this.getData();
        console.log(data.name);
        //console.log(this.d.name);
    }
}

```

---

<div class="post-metadata">

**Author:** ![Aniel](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/aniel/32/1642_2.png) [@Aniel](https://discourse.aurelia.io/u/Aniel)\
**Post date:** [January 28, 2020, 7:09am UTC](https://discourse.aurelia.io/t/store-the-result-in-a-global-variable-in-aurelia/3196/2 "2020-01-28T07:09:14Z")

</div>

The fetch is an asynchronous function and returns a [promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise), therefore you need to return the resulting promise in `getData` to access the result in `printData`. If you store the result in a global variable, the fetch request is not completed before you want to access it.

```javascript
export class Home {
    constructor() {
        this.printData();
    }

    getData() {
        return httpClient.fetch('example.com/api/v')
            .then(response => response.json())
            .then(data => {
                return data;
            });
    }

    printData() {
        this.getData()
            .then(data => console.log(data.name));
    }
}

```

Note the return in `getData` and the using of the `then` in `printData`.

---

<div class="post-metadata">

**Author:** ![adn](https://avatars.discourse-cdn.com/v4/letter/a/ce7236/32.png) [@adn](https://discourse.aurelia.io/u/adn)\
**Post date:** [January 28, 2020, 7:02pm UTC](https://discourse.aurelia.io/t/store-the-result-in-a-global-variable-in-aurelia/3196/3 "2020-01-28T19:02:49Z")

</div>

Is there a way so the function printData() will return the data? So for example:

```auto
<template>
   <div repeat.for="name of names">
    <p>Hello ${printData(name)}!</p>
   </div>
</template>

```

```auto
export class Home {
    constructor() {
        this.printData();
    }

    getData() {
        return httpClient.fetch('example.com/api/v')
            .then(response => response.json())
            .then(data => {
                return data;
            });
    }

    printData() {
        //var name;
        this.getData()
            .then(data => console.log(data.name));
            //return data.name;
            //name = data.name;
    }
    //return name
}

```

---

<div class="post-metadata">

**Author:** ![khuongduybui](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/khuongduybui/32/44_2.png) [@khuongduybui](https://discourse.aurelia.io/u/khuongduybui)\
**Post date:** [January 28, 2020, 7:58pm UTC](https://discourse.aurelia.io/t/store-the-result-in-a-global-variable-in-aurelia/3196/4 "2020-01-28T19:58:42Z")

</div>

[http://www.sobell.net/aurelia-async-bindings/](http://www.sobell.net/aurelia-async-bindings/) suggests using a custom binding behavior that will put a “loading” message when a promise is returned and later replace the message with what the promise resolves.

Basically if you add this to your resources

```auto
export class asyncBindingBehavior {
 
  bind(binding, source, busymessage) {
    binding.originalupdateTarget = binding.updateTarget;
    binding.updateTarget = (a) => { 
      if (typeof a.then === 'function') {
        if (busymessage) 
          binding.originalupdateTarget(busymessage);
        a.then(d => { binding.originalupdateTarget(d); });
      }
      else
        binding.originalupdateTarget(a);
     };
  }
 
  unbind(binding) {
    binding.updateTarget = binding.originalupdateTarget;
    binding.originalupdateTarget = null;
  }
}

```

Then you can do

```auto
<template>
   <div repeat.for="name of names">
    <p>Hello ${printData(name) & async}!</p>
   </div>
</template>

```

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [January 28, 2020, 8:04pm UTC](https://discourse.aurelia.io/t/store-the-result-in-a-global-variable-in-aurelia/3196/5 "2020-01-28T20:04:00Z")

</div>

With all due respect I would highly recommend to read up about how promises work as that is a fundamental concept of JS unrelated to Aurelia. Here is a nice read [https://javascript.info/promise-basics](https://javascript.info/promise-basics) just as an example your printData doesnt return the promise so even if you’d use an async binding it wouldn’t work. Again this is not meant as an insult in any way but its paramount to properly grasp a few basic constructs. I can assure you that doing so will help with every Framework you might use in the future

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [January 29, 2020, 7:09am UTC](https://discourse.aurelia.io/t/store-the-result-in-a-global-variable-in-aurelia/3196/6 "2020-01-29T07:09:19Z")

</div>

There is also this ready-made plugin also handling observables [https://github.com/zewa666/aurelia-async-binding](https://github.com/zewa666/aurelia-async-binding)

---

<div class="post-metadata">

**Author:** ![khuongduybui](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/khuongduybui/32/44_2.png) [@khuongduybui](https://discourse.aurelia.io/u/khuongduybui)\
**Post date:** [January 29, 2020, 2:36pm UTC](https://discourse.aurelia.io/t/store-the-result-in-a-global-variable-in-aurelia/3196/7 "2020-01-29T14:36:18Z")

</div>

Man, who’s that “Austrian guy” that owns so many useful Aurelia plugins?