Tengo un archivo de datos JSON realmente simple sin ningún tipo de envoltura, por ejemplo:
[{"name:","fakename"}, {"lang:", "javascript"}]
Estoy tratando de usar estos datos en un script js en el mismo directorio. Estoy leyendo en ambos archivos en el documento <head> , así:
<script id="myJSON" src="data.json"></script> <script src="myScript.js"></script>y luego la parte en la que estoy atascado es cómo hacer que myScript VEA esos datos JSON. En el script puedo hacer:
d = document.getElementById("myJSON"); console.log(d);El script devuelve el elemento DOM "myJSON", pero no sé cómo acceder a su contenido JSON. Supuse que sería una propiedad como 'texto' o 'valor' o 'innerHTML' pero no la veo por ninguna parte. Probé varias combinaciones del atributo de tipo en la etiqueta, pero nada de eso hace ninguna diferencia.
Sé que podría usar una API como buscar, pero eso es más complejo de lo que quiero. Mi mejor idea hasta ahora es editar el archivo json para poner un identificador al principio del archivo json, como var myJSON = '[{"json"}]'; entonces myScript tendría un identificador claro para JSON.parse(myJSON) . Pero ese es un paso adicional en un proceso automatizado que no quiero (o creo que necesito).
¿Cómo hago para que mi JS vea este JSON "anónimo"?
Si no quiere usar fetch, puede usar el código del lado del servidor (PHP, ASP, etc.) para escribir el texto del JSON en un div oculto en la página, y luego puede usar getElementByID para obtener el texto, seguido de parse para obtener un objeto que represente los datos JSON.
Esto no era tanto código adicional, pero fue un poco molesto entenderlo. Tuve que envolver todo en una cláusula .then de fetch, o de una función asíncrona que llamó fetch. Así es como quedó mi código.
readJSONFile().then(jq => { for (i = 0; i < jq.length; ++i) { console.log( jq[i].myJSONKey ) }); async function readJSONFile() { const response = await fetch('data.json'); const jq = await response.json(); return jq; }