Learning the process of accessing a JSON file from a different directory

Question

Learning the process of accessing a JSON file from a different directory

I am faced with a straightforward folder structure, it looks like this:

project  
│
└───data
│     file.json
│    
└───js
      test.js

My goal is to access the content of file.json within the test.js file in order to perform some additional back-end operations. Here's an example of a JSON file (the actual content is generic):

{"key1": 50, "key2": 6, "key3": 20,
"ke4": 18, "key5": 38, "key6": 30}

Thus far, my attempt has been:

var request = new XMLHttpRequest();
request.open("GET", "< path >", false);
request.send(null)
var my_JSON_object = JSON.parse(request.responseText);
alert(my_JSON_object.result[0]);

Unfortunately, this approach did not produce the desired outcome.

I have referred to these posts: post and one. They address similar issues, but they are outdated.

Consequently, my question is: What is the correct method for achieving this task, and is there a more modern approach (e.g., fetch) available?

javascript json

Answer 1

Answer №1

Even though the answers provided are a bit outdated, the old code is still functional and addresses half of your question. I personally don't mind using deprecated code as long as it gets the job done. The jQuery implementation you mentioned may not be cutting edge, but it functions just like the other solutions:

 $.getJSON('data/file.json', function(data) {
     console.log(JSON.stringify(data));
 });

In addition, the code snippet from your example won't work because the asynchronous nature of the operation is not being properly accounted for. When dealing with asynchronous tasks, it's crucial to define a callback function to execute once the file is loaded:

function readTextFile(file, callback) {
   var request = new XMLHttpRequest();
   request.overrideMimeType("application/json");
   request.open("GET", "< path >", false);
   request.onreadystatechange = function() {
       if (request.readyState === 4 && request.status == "200") {
          callback(request.responseText);
       }
   }
   request.send(null);
}

// Usage:
readTextFile("data/file.json", function(text){
   var my_JSON_object = JSON.parse(text);
   console.log(my_JSON_object);
   alert(my_JSON_object.result[0]);
});

Answer 2

Even though the answers provided are a bit outdated, the old code is still functional and addresses half of your question. I personally don't mind using deprecated code as long as it gets the job done. The jQuery implementation you mentioned may not be cutting edge, but it functions just like the other solutions:

 $.getJSON('data/file.json', function(data) {
     console.log(JSON.stringify(data));
 });

In addition, the code snippet from your example won't work because the asynchronous nature of the operation is not being properly accounted for. When dealing with asynchronous tasks, it's crucial to define a callback function to execute once the file is loaded:

function readTextFile(file, callback) {
   var request = new XMLHttpRequest();
   request.overrideMimeType("application/json");
   request.open("GET", "< path >", false);
   request.onreadystatechange = function() {
       if (request.readyState === 4 && request.status == "200") {
          callback(request.responseText);
       }
   }
   request.send(null);
}

// Usage:
readTextFile("data/file.json", function(text){
   var my_JSON_object = JSON.parse(text);
   console.log(my_JSON_object);
   alert(my_JSON_object.result[0]);
});

Answer 3

Answer №2

In my opinion, the solution you provided seems suitable. However, I suspect that there might be an issue with the file path. Instead of using :

$.getJSON('data/file.json', function(data) {
     console.log(JSON.stringify(data));
 });

Wouldn't it make more sense to use:

$.getJSON('./data/file.json', function(data) {
     console.log(JSON.stringify(data));
 });

Please take note of the "./" at the beginning of the file path.

Answer 4

In my opinion, the solution you provided seems suitable. However, I suspect that there might be an issue with the file path. Instead of using :

$.getJSON('data/file.json', function(data) {
     console.log(JSON.stringify(data));
 });

Wouldn't it make more sense to use:

$.getJSON('./data/file.json', function(data) {
     console.log(JSON.stringify(data));
 });

Please take note of the "./" at the beginning of the file path.

Learning the process of accessing a JSON file from a different directory

Answer №1

Answer №2

Similar questions

How to prevent the parent element from scrolling when changing the value of a number input by scrolling

The graph visualization fails to update properly even after attempting to redraw it

What is the process for invoking a JavaScript function from the code-behind of an Asp.Net application?

Are you feeling lost when it comes to Javascript? How is it possible for a boolean function to function as a

Utilizing a combination of Mongo, Mongoose, Multer, and FS for deleting images

The Puppeteer software does not automatically shut down the browser once the task is complete

Submitting a nested JSON object in an AJAX request

Error message: Unspecified service injected

When deserializing a double type variable, JsonConvert encounters an 'invalid integer' exception

Troubleshooting issue: Chrome bug causing JavaScript full height intro section to have incorrect padding and display issues

The VueJS component fails to load on the webpage

How to adjust cell alignment in Handsontable

What is the best way to assign a value to process.env within an npm script?

What is the best method for caching inline SVG in web browsers?

Getting the expanded row columns values in a RadGrid when using the onHierarchyExpanded event

Transferring JSON data to Google Sheets can result in unusual column formatting and all the information ending up in a

Safari: The onbeforeunload event

Need to update React textarea with value that is currently set as readonly

Using JQuery to switch classes and activate events

Passport.socket.io cannot resolve the issue of a missing session