I can't figure out how to loop through the connections object from fetch using x-for and Alpine JS to display the 2 records.

I tried looping through ${this.connections} with x-for but got a "object Object" error.

import { LitElement, html } from "../lit-all.min.js";

export class ContentDiv extends LitElement {
    constructor() {
        super();
        this.connections;
    }

    static properties = {
        connections: {},
    };

    connectedCallback() {
        super.connectedCallback();

        const dbPath = sessionStorage.getItem("dbPath");

        fetch(`${dbPath}/connections/listConnections.php`, {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            }
        })
            .then((response) => {
                return response.json();
            })
            .then((response) => {
                this.connections = response;
            });
    }

    createRenderRoot() {
        return this;
    }

    render() {
        return html`
          <h1>Connections</h1>
          <div>
            <ul>
              ***Loop and display ${this.connections} here***
            </ul>
          </div>
        `;
    }
}

customElements.define("content-div", ContentDiv);