> For the complete documentation index, see [llms.txt](https://developers.memberspace.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developers.memberspace.com/javascript-api/guides/member-info-spa.md).

# Getting Member Information - SPA

Specific examples of how to use the Javascript API.

In fronted environments such as single page applications, like React, Angular or Vue, the use of Events will not work as needed because MemberSpace will only fire the [*.ready*](/javascript-api/overview/events.md#memberspace-ready) event when initialized. For reliable access to [*memberInfo*](/javascript-api/overview/structures-and-examples/structures.md#memberinfo) use the following Promise function that incorporates a few different components of the MemberSapce JavaScript API.

```javascript
const getMsReadyPromise = () =>
  new Promise(resolve => {
    if (MemberSpace.ready) {
      // Ready event is already fired, so let's not wait for it, it will not be fired again
      resolve(window.MemberSpace.getMemberInfo());
    } else {
      // MS widget is not yet ready, let's subscribe for the event
      const handleReady = ({ detail }) => {
        resolve(detail);
        // Unsubscribe ourselves, this allows GC to collect all related memory
        document.removeEventListener('MemberSpace.ready', handleReady);
      };

      // Listen to ready event
      document.addEventListener('MemberSpace.ready', handleReady);
    }
  });

// ... Somewhere in an async fn
const { memberInfo } = await getMsReadyPromise();

// ... or using Promise.then
getMsReadyPromise().then(({ memberInfo }) => {
  // your code here
});
```

{% hint style="info" %}
This is very useful when you need this information only in specific screens or specific components in frameworks such as React, Angular and Vue.
{% endhint %}