Estoy tratando de obtener datos JSON de nuestro servidor y luego insertarlo en una ETIQUETA <script> en el lado del cliente . Vea abajo:
<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> El problema es: cuando hago console.log(data.imports) , me muestra los datos obtenidos, pero la ETIQUETA <script> se ve así:
<script type="systemjs-importmap">[object Object]</script> Lo que me parece extraño es que cuando uso JSON.stringify(data) , es posible ver que los datos se extrajeron de la API como se esperaba (ver más abajo), pero en formato JSON no extrae nada...
<script type="systemjs-importmap"> ...all data in string format... </script>¿Alguien podría decirme dónde estoy haciendo mal?
Todo lo que asigne a innerHTML se convertirá implícitamente en una cadena. Por lo tanto, el [object Object] que estás viendo. Para ver el valor JSON real, puede convertir explícitamente este objeto en una cadena JSON:
importmap.innerHTML = JSON.stringify(data.imports);Prueba importmap.innerText = JSON.stringify(data.imports); en cambio. InnerHtml espera una cadena HTML que data.imports simplemente no es. En ese momento, su objeto JSON se serializa como [Objeto de objeto] porque el navegador simplemente no sabe cómo representar el objeto.