How to assign external json file as variable in other file

Question

I currently have some Javascript on a page template which manages some JSON data. The way I have it configured currently, the JSON data is assigned to a variable right on the page template. What I would like to do is move the JSON to an external .json file and still be able to use my variable on the page template. Currently it looks like this:

var data = [{
    "fruit": "Apple",
    "size": "Large",
    "color": "Red"
}];

What I would like to do is create a file called data.json and then assign it as the data variable on my page template.

data.json :

{
    "fruit": "Apple",
    "size": "Large",
    "color": "Red"
}

Page template:

var data = 'data.json';

How can I accomplish this?

Answer 1

Load your json in dynamic way using eg fetch

 async function start() { let url = 'my.json' var data = await (await fetch(url)).json(); // ... } start();