Accessing JSON files locally using JavaScript in IE and Firefox

Question

Accessing JSON files locally using JavaScript in IE and Firefox

I am a beginner in JavaScript and currently working on a small HTML page that will be run locally. I have a string in JSON format that I need to store and load as a file on the hard drive.

I have managed to store the string using the following code snippet on Firefox:

function saveJSON() {
    var obj = {name:'John', max:100};
    window.open( "data:text/json;charset=utf-8," + escape(JSON.stringify(obj)))
}

However, this method only works on Firefox, and I need a solution that also works on Internet Explorer. I have looked into using ActiveX but have not been able to find a suitable example for implementation.

Should I explore the ActiveX route, or is there a more effective HTML/JS solution that is compatible with both browsers?

The second issue I am facing is loading the JSON file. After some research, I discovered that after loading the file, I can convert it into a JSON variable using JSON.parse. However, I am unsure of how to actually load a selected JSON file. I have an

<input type=file id="filePath">

element to obtain the file path (although it returns different values in each browser), and ideally I would like to perform something similar to

var a = loadFile(filePath.value)

If anyone has any suggestions or solutions for how to achieve this, I would greatly appreciate the assistance.

Thank you.

javascript json internet-explorer load local

Answer 1

Answer №1

If you want to load a file, it has to already be present on the server. From there, you can integrate it into your script either by lazy loading or including it in the head section. Another option is using the .load() method from the jQuery AJAX library. If the file isn't available on the server, you'll need to upload it first to prevent XSS attacks.

To retrieve data from a specific point, you can utilize the .load(), .get(), or full .ajax() calls provided by jQuery. Detailed information can be found here: http://api.jquery.com/load/

For saving data, consider storing it in a cookie, submitting the data through a form to open in a new window, or passing it via query string if that's preferable for your needs.

Although I personally use a different JSON library, the following code executes successfully in both Internet Explorer and Firefox:


$(document).ready(function() {
  var obj = { name: 'John', max: 100 };
  window.open("data:text/json;charset=utf-8," + escape($.toJSON(obj))) 
})
</pre>

If you want an efficient way to pass data, try something like this function:


function saveJSON(){
  var obj = {};
  obj.name = 'John';
  obj.max = 100;

  $("#json").val($.toJSON(obj));
  $("#hiddenForm").submit();
}


Don't forget to include a simple form to hold the data:

<form action="somepageToDisplayFormFields.php" target="_blank" id="hiddenForm">
  <input type="hidden" name="json" id="json" />
</form>


This method enables you to transfer larger and more complex objects without worrying about URI size restrictions or browser compatibility issues. Additionally, dealing with functions like escape(), encodeURIComponent(), etc., can become quite frustrating over time.

Answer 2

If you want to load a file, it has to already be present on the server. From there, you can integrate it into your script either by lazy loading or including it in the head section. Another option is using the .load() method from the jQuery AJAX library. If the file isn't available on the server, you'll need to upload it first to prevent XSS attacks.

To retrieve data from a specific point, you can utilize the .load(), .get(), or full .ajax() calls provided by jQuery. Detailed information can be found here: http://api.jquery.com/load/

For saving data, consider storing it in a cookie, submitting the data through a form to open in a new window, or passing it via query string if that's preferable for your needs.

Although I personally use a different JSON library, the following code executes successfully in both Internet Explorer and Firefox:


$(document).ready(function() {
  var obj = { name: 'John', max: 100 };
  window.open("data:text/json;charset=utf-8," + escape($.toJSON(obj))) 
})
</pre>

If you want an efficient way to pass data, try something like this function:


function saveJSON(){
  var obj = {};
  obj.name = 'John';
  obj.max = 100;

  $("#json").val($.toJSON(obj));
  $("#hiddenForm").submit();
}


Don't forget to include a simple form to hold the data:

<form action="somepageToDisplayFormFields.php" target="_blank" id="hiddenForm">
  <input type="hidden" name="json" id="json" />
</form>


This method enables you to transfer larger and more complex objects without worrying about URI size restrictions or browser compatibility issues. Additionally, dealing with functions like escape(), encodeURIComponent(), etc., can become quite frustrating over time.

Answer 3

Answer №2

After much searching, I stumbled upon a solution for reading client-side files that seems to be effective. The method requires user intervention and is considered relatively secure. Although it currently only functions on Firefox, I am content with this limitation for now.

I want to express my gratitude for all the valuable comments and responses provided; they have truly expanded my knowledge on this topic.

Answer 4

After much searching, I stumbled upon a solution for reading client-side files that seems to be effective. The method requires user intervention and is considered relatively secure. Although it currently only functions on Firefox, I am content with this limitation for now.

I want to express my gratitude for all the valuable comments and responses provided; they have truly expanded my knowledge on this topic.

Answer 5

Answer №3

Performing direct file system manipulation is typically restricted in client-side JavaScript for security reasons. Would you want unknown websites accessing your files?

However, you can achieve a similar result by making your JSON data into a downloadable link - just place your DATA URL as the href of a link, which should work on IE8 and newer versions. Unfortunately, older versions of IE may not support this method.

If you need to retrieve a JSON file from a specific path, there is a Firefox-only property that allows you to do so. More information can be found at: https://developer.mozilla.org/en/DOM/File

Answer 6

Performing direct file system manipulation is typically restricted in client-side JavaScript for security reasons. Would you want unknown websites accessing your files?

However, you can achieve a similar result by making your JSON data into a downloadable link - just place your DATA URL as the href of a link, which should work on IE8 and newer versions. Unfortunately, older versions of IE may not support this method.

If you need to retrieve a JSON file from a specific path, there is a Firefox-only property that allows you to do so. More information can be found at: https://developer.mozilla.org/en/DOM/File

Accessing JSON files locally using JavaScript in IE and Firefox

Answer №1

Answer №2

Answer №3

Similar questions

Trouble fetching asynchronous data in Next.js Higher Order Component

What is the best way to retrieve a value by using the data.get() method?

What are some effective methods for troubleshooting npm modules?

Ensuring Valid Submission: Utilizing Jquery for a Straightforward Form Submission with 'Alajax'

Function invoking React Hook

Efficiently sending data to a kintone endpoint with AWS Lambda and Node.js through AJAX

ReactJS - Unable to access property of undefined object

Verifying that the data has been successfully saved using JavaScript

Is there a hashing algorithm that produces identical results in both Dart and TypeScript?

Develop a video in mp4 format using Node.js and ffmpeg by combining two or more jpg images

A pattern matching formula to eliminate specific characters from the beginning to the end of a string

How can I parse a JSON string in a node.js environment?

Display the URL with proper formatting in the print function

Creating a server that is exclusive to the application in Node.js/npm or altering the response body of outgoing requests

Disable the scroll animation feature for certain IDs

What is the best method to add data to a child array located within a nested array?

Using props as classnames in next.js applications

Issues Persist with Updating mySQL Database using PHP

Encountering the issue: receiving an error message stating that shuffle(...) is undefined within

embedding a button alongside the pager in an HTML document