16

I'm trying to read a JSON file I have, uploaded by the user, and try to copy it to an array. However, with a .readAsText(), the return I get has the formatting of a string (obviously), such as including \" and \n and other string-like properties.

Is there a way I can use FileReader (or any other form of reading files, that don't involve a server) to read the JSON file and have it return just the plain JSON?

For example, having it return

[
  {"hello": "world"}
]

or

[{"hello": "world"}]

and not

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

?

Edit: I am now aware of the JSON.parse(text) method, but I'm getting an error when parsing the FileReader object

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

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

Can I get what i read with FileReader to another var that is a string, and then parse that new var?

José M.
  • 523
  • 2
  • 8
  • 17
  • Do you mean to get the JSON string decoded automatically into JavaScript object? – Álvaro González Feb 10 '19 at 15:20
  • 2
    Possible duplicate of [Safely turning a JSON string into an object](https://stackoverflow.com/questions/45015/safely-turning-a-json-string-into-an-object) – Reinstate Monica Cellio Feb 10 '19 at 15:20
  • 1
    As per the link in my comment above, you want `JSON.parse(text);` to turn that into an object. – Reinstate Monica Cellio Feb 10 '19 at 15:23
  • @Archer I was not aware of JSON.parse, and it does seem to be near the solution, but I'm getting the error that I can't parse a FileReader obj... anyway I can pass the information to another obj to hold the string, and then parse that obj? – José M. Feb 10 '19 at 15:25
  • `JSON` is a string format. What do you mean by _"parse a FileReader obj"_? Can you include the HTML and JavaScript code that uses `FileReader` at the question? See https://stackoverflow.com/help/mcve – guest271314 Feb 10 '19 at 15:27
  • @guest271314 I've updated the question. Hopefully it will better explain my problem. – José M. Feb 10 '19 at 15:34

1 Answers1

22

The code at the question uses FileReader incorrectly.

FileReader .readAs<Type> operation is asynchronous. FileReader has load and loadend events where the result property of event.target and FileReader instance is the resulting asynchronously processed data.

Do not parse the FileReader object itself.

.readAs<Type> expects a Blob to be passed as parameter, not a JavaScript plain 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);
guest271314
  • 1
  • 15
  • 104
  • 177
  • This makes a lot of sense, and seems to be the correct answer, but I'm getting an error saying "Property 'result' does not exist on type 'EventTarget'", on the console.log and the .result s that are used... Any idea why? – José M. Feb 10 '19 at 15:52
  • I dont seem to be able to... The error might be on my side, I'll take a better look at it.I'm a bit new to all this, so sorry for not being as clear as I should! – José M. Feb 10 '19 at 16:04
  • 1
    @JoséM. See also [How FileReader.readAsText in HTML5 File API works?](https://stackoverflow.com/questions/40146768/how-filereader-readastext-in-html5-file-api-works/) – guest271314 Feb 10 '19 at 16:05
  • just popping in for a quick note that the good old IT fix of "turn it off an on again" seamed to "fix" whatever bug was happening. It's working now! Thank you once again! – José M. Feb 11 '19 at 21:24