How to utilize FileReader for parsing a JSON document?

Question

How to utilize FileReader for parsing a JSON document?

I'm currently facing an issue while attempting to read and copy a JSON file uploaded by the user into an array. When using .readAsText(), the returned data includes string formatting elements like \" and \n.

Is there a way to utilize FileReader or any other method of file reading (excluding server-side processing) to extract the raw JSON without such additional characters?

For instance, rather than

[
  {"hello": "world"}
]

or

[{"hello": "world"}]

We want it to display as

"[\n{\"hello\": \"world\"}\n]"

without extra escape characters?

Edit: I have researched the JSON.parse(text) method, but encountered an error when trying to parse the FileReader object:

 let fileUploaded = new FileReader();
 fileUploaded.readAsText(MY_JSON_FILE);
 console.log(JSON.parse(fileUploaded));

The above code resulted in the following error message:

error TS2345: Argument of type 'FileReader' is not assignable to parameter of type 'string'

Is there a way to assign the content read by FileReader to a new variable as a string, which can then be parsed successfully?

javascript typescript filereader

Answer 1

Answer №1

The code provided in the question demonstrates improper usage of the FileReader.

It is essential to understand that the .readAs<Type> operation of the FileReader is asynchronous. This means that it triggers events such as load and loadend, where the asynchronously processed data can be accessed through the result property of event.target or the FileReader instance.

Remember not to directly parse the FileReader object itself.

Furthermore, it is important to note that .readAs<Type> requires a Blob parameter, rather than a plain JavaScript object.

const MY_JSON_FILE = [{
  "hello": "world"
}];

let json = JSON.stringify(MY_JSON_FILE);

const blob = new Blob([json], {type: "application/json"});

const fr = new FileReader();

fr.addEventListener("load", e => {
  console.log(e.target.result, JSON.parse(fr.result));
});

fr.readAsText(blob);

Answer 2

The code provided in the question demonstrates improper usage of the FileReader.

It is essential to understand that the .readAs<Type> operation of the FileReader is asynchronous. This means that it triggers events such as load and loadend, where the asynchronously processed data can be accessed through the result property of event.target or the FileReader instance.

Remember not to directly parse the FileReader object itself.

Furthermore, it is important to note that .readAs<Type> requires a Blob parameter, rather than a plain JavaScript object.

const MY_JSON_FILE = [{
  "hello": "world"
}];

let json = JSON.stringify(MY_JSON_FILE);

const blob = new Blob([json], {type: "application/json"});

const fr = new FileReader();

fr.addEventListener("load", e => {
  console.log(e.target.result, JSON.parse(fr.result));
});

fr.readAsText(blob);

How to utilize FileReader for parsing a JSON document?

Answer №1

Similar questions

The PHP counter conceals the comma upon loading and does not display it permanently

What is the optimal approach for managing multiple languages using React Router version 5?

Tips for initiating and terminating the evaluation of a condition at regular intervals using JavaScript

Verification of user input upon clicking the submit button within a form

Why am I receiving a null response from my ajax request?

What is the best way to send an object to an Angular form?

Preventing duplicate namespace declarations in TypeScript

What is the best way to incorporate Form Projection into Angular?

Experiencing a glitch with the Realtime Database feature on Firebase

Using jQuery to retrieve child elements and assign numerical values to them

Managing multiple changes in input values within an object

Retrieve information from api and showcase it in html

Having trouble getting the finally clause to work properly in Angular JS version 1.7

Can you explain the distinction between using angular.copy() and simply using an assignment (=) to assign values

Is error propagation from nested Promise to parent Promise not working properly in Node.js?

Display information using AngularJS within the Ionic framework

What is the best technique for verifying the existence of data in the database before making updates or additions with Angular's observables?

Using jQuery's $.ajax() function to make an asynchronous request, and then passing the

Determining the top element displayed in a div: A guide

Experiencing a lack of information in express?