Fetch data is shown in console.log, but not in HTML TAG

I’m trying to fetch a JSON data from our server and then inserting it in a <script> TAG in client-side. See below:

<script>
    const bodyTag = document.getElementsByTagName("body")[0];

    const url = "https://ourAPI.com";
    const parameters = {
        method: "GET",
        headers: new Headers(),
        mode: "cors",
        cache: "default",
    };

    fetch(url, parameters).then((response) => {
        if (response.ok) {
            response.json().then((data) => {
                console.log(data.imports);   //It shows me data fetched.
                const importmap = document.createElement("script");
                importmap.type = "systemjs-importmap";
                importmap.innerHTML = data.imports;   //It shows me "[object Object]".
                bodyTag.appendChild(importmap);
            });
        }
    });
</script>

The problem is: when I console.log(data.imports), it shows me the fetched data, but the <script> TAG looks like this:

<script type="systemjs-importmap">[object Object]</script>

What it looks strange for me is when I use JSON.stringify(data), it is possible to see that the data was extracted from the API as expected (see below), but in JSON format it doesn’t extract anything…

<script type="systemjs-importmap"> ...all data in string format... </script>

Could anyone tell me where I’m doing wrong?

Answer

Anything you assign to innerHTML will be implicitly converted to a string. Hence, the [object Object] you’re seeing. In order to see the actual JSON value, you can explicitly convert this object to a JSON-string:

importmap.innerHTML = JSON.stringify(data.imports);

Advertisement

Answer