I'm trying to make a simple html-page that shows now playing information from an in house media streamer. The streamer offers a status url that returns simple xml. I managed to fetch the xml, parse it and output it to the console log. But I can't get it to be shown in the html. Whatever I try, I keep seeing '[object Promise]'.

<script>
        let apis = {
            bluos: { //get bluos info
                api:"http://192.168.2.86:11000/",
                url: (status) => {
                    return apis.bluos.api + status
                }
            }
        };
        function getStatus() {
             return fetch(apis.bluos.url("Status"))
                .then(response => response.text())
                .then(str => new window.DOMParser().parseFromString(str, "text/xml"))
                .then(data => console.log(data))   
        }
        document.getElementById("artist").innerHTML = getStatus();
        
    </script>

The parser seems to work, I see #document in the console log with parsed data:

Screenshot of the console log

I tried to first fetch and then return, but things like data and response are undefined.

        function getStatus() {
            fetch(apis.bluos.url("Status"))
                .then(response => response.text())
                .then(str => new window.DOMParser().parseFromString(str, "text/xml"))
                .then(data => console.log(data));
               return data;
        }

I also tried:

function getStatus() {
                 fetch(apis.bluos.url("Status"))
                    .then(response => response.text())
                    .then(str => new window.DOMParser().parseFromString(str, "text/xml"))
                    .then(data => console.log(data))  
                return document; 
            }

That returns [objectHTMLDocument]

Is that the way to go?