How to reload the JSON data on every onclick event in javascript?

Question

I have this code where I import the JSON data into a variable, and then i modify that data:

import jsondata1 from '../project.json' assert {type: 'json'};
var jsondata1s = JSON.stringify(jsondata1)
document.getElementById("project-btn").onclick ...

The JSON data gets changed on other processes, so everytime that I click on the button I want to re-import the JSON data updated, something that would look like this:

document.getElementById("project-btn").onclick onclick = () => {
    //import jsondata1 from '../project.json' assert {type: 'json'};
    var jsondata1s = JSON.stringify(jsondata1)
}

So everytime i click on the button the JSON data gets updated, but this JSON line cannot be at a function.

How can I achieve this?

Is there any other way maybe that I can import the JSON data in a line without needing to be at the beginning?

It’s hard to follow how you’re processing the data and what you’re trying to do. — OFRBG
– OFRBG, Commented Oct 22, 2022 at 15:37

philale · Accepted Answer · 2022-10-22 15:43:58Z

1

You can not use the import declaration like that. One solution is to fetch() the json file when wanted (make a request). Like this:

fetch(".../project.json")
.then(response => response.json())
.then(json => {
    console.log(json):
    //Do something with json variable
});

answered Oct 22, 2022 at 15:43

philale

4274 silver badges19 bronze badges

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

Collectives™ on Stack Overflow

How to reload the JSON data on every onclick event in javascript?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related