-1

I'm trying to read a big json file with JS

const jsonFile = JSON.parse("3BP-OOP-PFR.json");
console.log(jsonFile);

The problem is

VM334:1 Uncaught SyntaxError: Unexpected token B in JSON at position 1 at JSON.parse () at main.js:1:23

Collaxd
  • 171
  • 1
  • 11
  • 2
    I don't think that anyone here can help you without seeing the file you're trying to read ;) – Michael Jun 02 '22 at 15:49
  • 3
    [`JSON.parse`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse) takes a JSON string, not a file name. `3BP-OOP-PFR.json` is not a valid JSON string. – D M Jun 02 '22 at 15:50
  • it's a big json generated by pandas export – Collaxd Jun 02 '22 at 15:50
  • 2
    Well, ignore my first line. `JSON.parse` expects a json string and not a filename – Michael Jun 02 '22 at 15:50
  • so @DM how I can read the file first please? – Collaxd Jun 02 '22 at 15:50
  • @Collaxd [How to import a JSON file in ECMAScript 6?](https://stackoverflow.com/questions/34944099/how-to-import-a-json-file-in-ecmascript-6) – D M Jun 02 '22 at 15:51
  • Please can you post your json file data here, if its big you may post as a sample – Chetan Ghadiya Jun 02 '22 at 15:52

1 Answers1

1

You are parsing the filename as JSON, which will fail. The JSON.parse function expects a JSON string value to parse, not a file.

Have you tried importing the file instead?

import jsonFile from "3BP-OOP-PFR.json";

console.log(jsonFile);

If you are using a browser, you will need to fetch the file:

fetch('https://website.com/subdir/3BP-OOP-PFR.json')
  .then(res => res.json())
  .then(json => console.log(json))

If you want to use async/await:

const res = await fetch('https://website.com/subdir/3BP-OOP-PFR.json')
const json = await res.json();
console.log(json);

Keep-in-mind that if you are fetching a JSON file locally, this will fail. Make sure you are using a webserver and running off of localhost. I believe there are flags that you can pass (CLI) to the browser to override the local file loading error.

Mr. Polywhirl
  • 42,981
  • 12
  • 84
  • 132
  • hey! ty, but now my error is Uncaught SyntaxError: Cannot use import statement outside a module (at main.js:1:1) – Collaxd Jun 02 '22 at 15:54
  • 1
    I updated the response to include a browser scenario. – Mr. Polywhirl Jun 02 '22 at 15:56
  • ok this solution works, but how I can put into a var? – Collaxd Jun 02 '22 at 16:02
  • const data = fetch('https://website.com/subdir/3BP-OOP-PFR.json') .then(res => res.json()) .then(json => console.log(json)) – Collaxd Jun 02 '22 at 16:02
  • I need to acess it and later do something like data.flop["0] etc etc @Mr.Polywhirl – Collaxd Jun 02 '22 at 16:09
  • 1
    @Collaxd you can destructure the JSON properties as variables. – Mr. Polywhirl Jun 02 '22 at 16:10
  • look, let response; const data = fetch("3BPOOPPFR.json") .then((res) => res.json()) .then((json) => (response = json)); console.log(response); returns undefined if clear see the code please and ty alot https://i.imgur.com/r4IL6s3.png https://i.imgur.com/LcThqYR.png – Collaxd Jun 02 '22 at 16:15
  • and yes, i Just use it local – Collaxd Jun 02 '22 at 16:53
  • 1
    @Collaxd the promise is asynchronous. You will not be able to access the `response` that you store inside the promise—outside of it. You will need to await the promise or pass-in a callback. Your follow-on issues fall the scope of this question. Please open a new question with your *new* problem. – Mr. Polywhirl Jun 02 '22 at 17:09