Javascript load all the keys in external JSON-CodePudding

I have external JSON at location /data/words.json

{
    "sports":       ["golf", "hockey", "football"],
    "animals":      ["giraffe", "snake", "lizard", "puma"],
    "video games":  ["pacman", "asteroids", "super mario brothers", "donkey kong"]
}

I need to access this in my javascript function. I have loaded the file as follows:

<script type="text/javascript" src="./data/words.json"></script>

How can I print all the keys of given JSON and print it on browser? Note that provided JSON does not have a variable name.

CodePudding user response：

JSON was never meant to be loaded this way, as you've probably come to find out. Why not just use fetch instead (if your expected execution environment supports it)?

const jsonData = await fetch('./data/words.json').then(res => res.json());

Depending on what exactly you have in mind when you say "print all the keys of given JSON and print it on browser", you could accomplish that pretty easily:

Object.keys(jsonData).forEach(key => console.log(key));

CodePudding user response：

Write a native ECMAScript module that loads the JSON into a constant and then manipulates it. No need to import it before the script runs either.

EDIT:

Having forgotten my older ways of working with pure JavaScript, just remembered you'll also need a web server running on your local machine to be able to properly load resources, even if they are stored locally.

<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>