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?
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);
Try importmap.innerText = JSON.stringify(data.imports); instead. InnerHtml expects an HTML string which data.imports just isn't. At that point your JSON object is being serialized as [object Object] because the browser just doesn't know how else to represent the object.