What is the proper way to render an async function?

Question

I have a function that fetches an object and returns a boolean from a check on the said object.

I need this boolean to decide what HTML should be the output of my render() function. When the function that checks the fetched object is called in my render() function, it always returns "undefined", as it always evaluates to true.

How should I proceed to output the correct value in proper timing? Thank you.

    async isGreenlisted() {
        return fetch(`${WEB_SERVICE_URL}/v2/banners/${this.viewId}`)
            .then(res => {
                for (let list in res) {
                    if (res[list].isDisplayed && list === "green") {
                        console.log("green true");
                        return true;
                    }
                }
                return false;
            });
    }

    render() {
        return html`
            <style>
                paper-button {
                    color: blue;
                }
            </style>
            <div>
                ${this.isGreenlisted()
            ? html`
                            <paper-button raised @click="${this._onClick}">Disable Powered By</paper-button>
                      `
            : html`
                            <paper-button raised @click="${this._onClick}">Enable Powered By</paper-button>
                      `}
            </div>
        `;
    }
}

Answer 1

isGreenlisted() returns a Promise so in the ternary operator you're essentially evaluating the promise itself instead of the value it will resolve to, and since class instances are truthy , the first template is always shown.

You should instead wait for the result of the promise, for example by using lit-html 's until directive :

import {until} from 'lit-html/directives/until';

render() {
  return html`
  ${until(
    this.isGreenlisted().then(res => res
      ? html`True`
      : html`False`),
    html`Loading...`,
  )}
  `;
}

Answer 2

I have a function that fetches an object and returns a boolean from a check on the said object.

I need this boolean to decide what HTML should be the output of my render() function. When the function that checks the fetched object is called in my render() function, it always returns "undefined", as it always evaluates to true.

How should I proceed to output the correct value in proper timing? Thank you.

    async isGreenlisted() {
        return fetch(`${WEB_SERVICE_URL}/v2/banners/${this.viewId}`)
            .then(res => {
                for (let list in res) {
                    if (res[list].isDisplayed && list === "green") {
                        console.log("green true");
                        return true;
                    }
                }
                return false;
            });
    }

    render() {
        return html`
            <style>
                paper-button {
                    color: blue;
                }
            </style>
            <div>
                ${this.isGreenlisted()
            ? html`
                            <paper-button raised @click="${this._onClick}">Disable Powered By</paper-button>
                      `
            : html`
                            <paper-button raised @click="${this._onClick}">Enable Powered By</paper-button>
                      `}
            </div>
        `;
    }
}