Import a local JSON using JavaScript

Question

I want to have my initialization code import a JSON file, I don't know if I'm not looking up my question properly but I can't find a solution. Ideally, it would run completely offline. Right now I don't have any additional JavaScript library, so keeping it vanilla would be a plus.

Full context: I'm trying to make a game that runs on JavaScript (using an HTML to display everything), using nothing but local files so it can run offline. The JSON files would be used to import data like maps, characters, equipment, skills, and maybe plain text to make translating easier. It's for the latter purpose that I want to import the JSON files using JavaScript, so I can import the right file based on the language picked.

I'm fairly new to JavaScript.

JSON is a subset of a JavaScript object. You can therefore just define it in any JavaScript file you are using (see the answers). You would benefit however if you put your code on a local webserver which you can then access via http://localhost. You can then access all files you are serving e.g. via XHR. — ssc-hrep3
– ssc-hrep3, Commented May 28, 2021 at 8:04

Tenma Chinen Pou · Accepted Answer · 2022-11-13 13:10:37Z

1

Easy as using type="module" for script, which allows the use of import.

index.html

<script src="script.js" type="module"></script>

script.js

import jsonData from './json-file.json' assert {type : 'json'};

console.log(jsonData);

json-file.json

{
  "name" : "John",
  "age" : 26,
  "height" : 1.78
}

answered Nov 13, 2022 at 13:10

Tenma Chinen Pou

311 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

chaitan94 · Accepted Answer · 2021-05-28 07:42:26Z

0

Two options you have:

Include the JSON within your javascript code itself.
Request the file via an AJAX call.

answered May 28, 2021 at 7:42

chaitan94

2,2321 gold badge20 silver badges20 bronze badges

4 Comments

Samuel Over a year ago

An AJAX call looks like it would prevent my project from being fully offline. Can you talk me through including the JSON within my code?

chaitan94 Over a year ago

You can make AJAX offline as well, assuming you are running a local HTTP server. Just call to localhost. If you are not even running a local server. I would suggest option 1.

Samuel Over a year ago

By the first option, do you mean simply writing the JSON as a JavaScript object? If that's the case, I might as well import a simple JS file whose only purpose is to declare the object, based on the (human) language I want to apply.

chaitan94 Over a year ago

Yes, if that works for you, you can simply just do that. (You can accept my answer btw if it helped)

Marconymous · Accepted Answer · 2021-05-28 07:57:45Z

0

According to this gist on Github, you can just import the json file just like a .js file. The JSON needs to be an object as shown in the example below.

This is the example code I just tried: HTML / JS:

    <script type="text/javascript" src="file.json"></script>
    <script>
        console.log(data);
    </script>

JSON:

      data = {
             "id": 5,
             "name": "Marconymous",
             "origin": "Switzerland"
          }

answered May 28, 2021 at 7:57

Marconymous

111 silver badge3 bronze badges

4 Comments

Samuel Over a year ago

That would be reading the .json file as a .js file. Once again I'm fairly new, but I know that a JSON typically starts with an {. Even Visual Studio Code returns a problem if you try starting the file's contents with "data = {".

Marconymous Over a year ago

I tried changing the code to: { "data" : { "id": 5, "name": "Marconymous", "origin": "Switzerland" } } VSC doesn't see an error, but now in Chrome I get an error so that wont work.

Samuel Over a year ago

I got the same thing. I think it's because the HTML script tag reads the file in JavaScript. So this second syntax is correct for a JSON, but not for a script element.

Marconymous Over a year ago

Most likely yes.

Collectives™ on Stack Overflow

Import a local JSON using JavaScript

3 Answers 3

Comments

4 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related