How to access my local JSON file in my JS script?

Agent67

Agent67

Honorary Master
Joined
Nov 7, 2020
Messages
28,008
Reaction score
20,150
Location
Western Cape
So I need to access and get the contents of a local JSON file that contains the names of each staff member, their job title and an image of their face, so I can use JS to load all of that onto the related page. The problem is I tried to use fetch at first but it blocked me because of CORS.

I can't make a server, because if I do then it'll complicate things when I send in my assignment (yes, the same one mentioned in this post) and because the lecturer told me to stick close to the file submission requirements.

I can't put the JSON file contents into my script either because there has to be a separate "staff.json" file according to the requirements.

So I'm not sure what to do anymore. What do I do just to access the damned JSON file in my script?

P.S I already validated my JSON file on JSONLint, and I got a clean bill of health.
 
Can you load it via the “file://“ protocol?

Probably not. Browser is a sandbox. Being able to access a file would be extremely insecure.

You’d need to “upload” the file, using a file input. You can then access it via FormData
 
PrimeSteak said:
So I need to access and get the contents of a local JSON file that contains the names of each staff member, their job title and an image of their face, so I can use JS to load all of that onto the related page. The problem is I tried to use fetch at first but it blocked me because of CORS.

I can't make a server, because if I do then it'll complicate things when I send in my assignment (yes, the same one mentioned in this post) and because the lecturer told me to stick close to the file submission requirements.

I can't put the JSON file contents into my script either because there has to be a separate "staff.json" file according to the requirements.

So I'm not sure what to do anymore. What do I do just to access the damned JSON file in my script?

P.S I already validated my JSON file on JSONLint, and I got a clean bill of health.
Click to expand...

With modern browsers you can't load file system files like that anymore, specifically due to CORS.
You have 3 options:
1. Use the http-server npm package which is an easy to use and lightweight http server.
2. Put the json contents in a js file, assign to a global variable and access like that.
3. Upload the file as per _kabal_
 
Barbarian Conan said:
1. Use the http-server npm package which is an easy to use and lightweight http server.
Click to expand...
I can't make a server, because if I do then it'll complicate things when I send in my assignment (yes, the same one mentioned in this post) and because the lecturer told me to stick close to the file submission requirements.
Click to expand...
Barbarian Conan said:
2. Put the json contents in a js file, assign to a global variable and access like that.
Click to expand...
I can't put the JSON file contents into my script either because there has to be a separate "staff.json" file according to the requirements.
Click to expand...
Barbarian Conan said:
Upload the file as per _kabal_
Click to expand...
I'll check it out.
 

FileReader - Web APIs | MDN

The FileReader interface lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using File or Blob objects to specify the file or data to read.
developer.mozilla.org developer.mozilla.org
 
_kabal_ said:

FileReader - Web APIs | MDN

The FileReader interface lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using File or Blob objects to specify the file or data to read.
developer.mozilla.org developer.mozilla.org
Click to expand...

Using files from web applications - Web APIs | MDN

Using the File API, web content can ask the user to select local files and then read the contents of those files. This selection can be done by either using an HTML <input type="file"> element or by drag and drop.
developer.mozilla.org developer.mozilla.org

Were you referring to something like this?
 
PrimeSteak said:

Using files from web applications - Web APIs | MDN

Using the File API, web content can ask the user to select local files and then read the contents of those files. This selection can be done by either using an HTML <input type="file"> element or by drag and drop.
developer.mozilla.org developer.mozilla.org

Were you referring to something like this?
Click to expand...

FileReader: readAsText() method - Web APIs | MDN

The readAsText() method of the FileReader interface is used to read the contents of the specified Blob or File. When the read operation is complete, the readyState property is changed to DONE, the loadend event is triggered, and the result property contains the contents of the file as a text string.
developer.mozilla.org developer.mozilla.org
 
Btw, all I am doing here are google searches like “read local file contents in browser” ;)
 

Reason: CORS request not HTTP - HTTP | MDN

CORS requests may only use the HTTP or HTTPS URL scheme, but the URL specified by the request is of a different type. This often occurs if the URL specifies a local file, using the file:/// scheme.
developer.mozilla.org developer.mozilla.org

Basically no modern browser will allow you to load up a file without it being a web server.
Chat with your lecturer, ask him if he is fine with just a normal file input, or if can embed. Forcing an npm run is probably overdoing it for a lot of students in your year as then need to learn how to set up npm/webpack etc.
 
I'm just going to ask my lecturer again tomorrow if I can use a server. I've looked everywhere and all the answers I find are variations of fetch/AJAX. I'm not sure how the FileReader thing would work either.

Btw:

s.JPG

How can I have this display properly as HTML and not an HTML string? I've tried to appendChild with trying to escape the HTML but it just gives me errors. Hence why I'm using textContent for now.

1664094894554.png

@_kabal_
 
PrimeSteak said:
I'm just going to ask my lecturer again tomorrow if I can use a server. I've looked everywhere and all the answers I find are variations of fetch/AJAX. I'm not sure how the FileReader thing would work either.

Btw:

View attachment 1389180

How can I have this display properly as HTML and not an HTML string? I've tried to appendChild with trying to escape the HTML but it just gives me errors. Hence why I'm using textContent for now.

View attachment 1389188

@_kabal_
Click to expand...
1664095319030.png
 
PrimeSteak said:
I'm just going to ask my lecturer again tomorrow if I can use a server. I've looked everywhere and all the answers I find are variations of fetch/AJAX. I'm not sure how the FileReader thing would work either.

Btw:

View attachment 1389180

How can I have this display properly as HTML and not an HTML string? I've tried to appendChild with trying to escape the HTML but it just gives me errors. Hence why I'm using textContent for now.

View attachment 1389188

@_kabal_
Click to expand...
The file reader api document that I linked has an actual working example in it???
It works.

“Just gives me errors” is not a very useful statement.

Fetch/Ajax will not work.

Code: 
const jsonObjectLoadedFromFile = JSON.parse(fileReader.result);
console.log(jsonObjectLoadedFromFile);

Adapt the example to do that first
 
Last edited:
_kabal_ said:
The file reader api document that I linked has an actual working example in it???
It works.
Click to expand...
The problem is I'm struggling to understand the example.
_kabal_ said:
Fetch/Ajax will not work.

Code: 
const jsonObjectLoadedFromFile = JSON.parse(fileReader.result);
console.log(jsonObjectLoadedFromFile);

Adapt the example to do that first
Click to expand...
I'll try it again.

Btw any advice on the HTML string problem?
“Just gives me errors” is not a very useful statement.
Click to expand...
Ok, the specific error I got is similar to this:
Node.appendChild: Argument 1 is not an object.
Click to expand...
If I try to append the table just like that to the section.
 
PrimeSteak said:
The problem is I'm struggling to understand the example.

I'll try it again.

Btw any advice on the HTML string problem?

Ok, the specific error I got is similar to this:

If I try to append the table just like that to the section.
Click to expand...

Get the example running in your own html/browser first.

Then you can break down the pieces. If you try to understand something that you cannot see in action, it is going to be more tricky to internalize the flow.

For your error: https://www.w3schools.com/jsref/met_node_appendchild.asp

appendChild needs an element, not a string
 
_kabal_ said:
Get the example running in your own html/browser first.

Then you can break down the pieces. If you try to understand something that you cannot see in action, it is going to be more tricky to internalize the flow.

For your error: https://www.w3schools.com/jsref/met_node_appendchild.asp

appendChild needs an element, not a string
Click to expand...
Ok, yet I save the table just as it is to sessionStorage, and try to appendChild but I get the same error? That I mentioned?
1664099388997.png
1664099412244.png
 
PrimeSteak said:
Ok, yet I save the table just as it is to sessionStorage, and try to appendChild but I get the same error? That I mentioned?
View attachment 1389226
View attachment 1389228
Click to expand...
I got it. Did this:
JavaScript: 
let tableDiv = document.createElement("table");
    console.log(getFromSessionStorage(keys[9]));
    servicesDiv.appendChild(tableDiv);
    tableDiv.innerHTML = getFromSessionStorage(keys[9]);
 
You must log in or register to reply here.
Back
Top
Sign up to the MyBroadband newsletter
X