Tengo JSON externo en la ubicación /data/words.json
{ "sports": ["golf", "hockey", "football"], "animals": ["giraffe", "snake", "lizard", "puma"], "video games": ["pacman", "asteroids", "super mario brothers", "donkey kong"] }Necesito acceder a esto en mi función javascript. He cargado el archivo de la siguiente manera:
<script type="text/javascript" src="./data/words.json"></script>¿Cómo puedo imprimir todas las claves de JSON dado e imprimirlas en el navegador? Tenga en cuenta que siempre que JSON no tenga un nombre de variable.
JSON nunca tuvo la intención de cargarse de esta manera, como probablemente haya llegado a descubrir. ¿Por qué no simplemente usar fetch en su lugar ( si su entorno de ejecución esperado lo admite )?
const jsonData = await fetch('./data/words.json').then(res => res.json());Dependiendo de lo que tenga exactamente en mente cuando dice " imprimir todas las claves de JSON dado e imprimirlo en el navegador ", podría lograrlo con bastante facilidad:
Object.keys(jsonData).forEach(key => console.log(key));Escriba un módulo ECMAScript nativo que cargue el JSON en una constante y luego lo manipule. Tampoco es necesario importarlo antes de que se ejecute el script.
EDITAR:
Habiendo olvidado mis formas anteriores de trabajar con JavaScript puro, recordé que también necesitará un servidor web que se ejecute en su máquina local para poder cargar recursos correctamente, incluso si están almacenados localmente.
<script type="module"> import * as words from './data/words.json'; const wordsObj = JSON.parse(words); const wordsKeys = Object.keys(wordsObj); const wordsSpan = document.createElement("span"); for (let i = 0; i < wordsKeys.length; i++) { wordsSpan.innerHTML += wordsKeys[i] + "<br>"; } document.getElementByTagName("body").appendChild(span); </script>