how to read data from a json file in javascript

Question

I have a json file with this object:

{
    "fontFamily": "Roboto",
    "color": "red",
    "backgroundColor": "green",
    "textForExample": "Hello world i'm a text that's used to display an exemple for my creator."
}

and when i'm parsing it I have an error in my console that says "infosFile.json:2 Uncaught SyntaxError: Unexpected token ':'" and then when I'm trying to use it in my Javascript, I got this message in console: "infosFile is not defined", I don't understand where is the problem

score 1 · Answer 1 · answered Dec 13 '21 at 19:19

1

The json is valid. You can check if you json file is valid at the following link: https://jsonformatter.curiousconcept.com/

The problem could be that in order to read json from your computer with JavaScript you need NodeJS installed. You can download NodeJS from here: https://nodejs.org/en/

You can read json with NodeJS like this.

const fs = require('fs');

let rawdata = fs.readFileSync('<path/yourFileName>.json');
let data = JSON.parse(rawdata);
console.log(data);

answered Dec 13 '21 at 19:19

LMark

58
6

i tried this but i have an error saying 'require is not defined' – RégisLeRégisseur Dec 13 '21 at 19:32
Are you using it on the client side or server side? – LMark Dec 14 '21 at 07:58

score 0 · Answer 2 · answered Dec 13 '21 at 19:21

0

Try

const info = require('infosFile.json');

console.log(JSON.parse(info)) // should output valid data

answered Dec 13 '21 at 19:21

Lervad

106
6

i tried this but i have an error saying 'require is not defined' – RégisLeRégisseur Dec 13 '21 at 19:32

score 0 · Answer 3 · edited Dec 13 '21 at 19:41

0

Make sure that you have the right path to access your JSON file

use require("") to access your json file and put your inside the double quotes

use JSON.parse() to read and store it inside a variable

const json_file = require("./json/test.json");
const data = JSON.parse(json_file);

You could also stringify it by using

const data_stringified = JSON.stringify(data);

edited Dec 13 '21 at 19:41

Dharman

30,962
25
85
135

answered Dec 13 '21 at 19:36

cleon briones

11
1

It still doesn't work, i don't know why but I still have this message "script.js:5 Uncaught ReferenceError: require is not defined", i'm sad – RégisLeRégisseur Dec 13 '21 at 19:43
and i still have this message "Uncaught SyntaxError: Unexpected token ':'" for my json file – RégisLeRégisseur Dec 13 '21 at 19:44
@RégisLeRégisseur are you using it in the client side or server side? can you show a code snippet – cleon briones Dec 13 '21 at 19:45
@RégisLeRégisseur have a look at this thread https://stackoverflow.com/questions/19059580/client-on-node-js-uncaught-referenceerror-require-is-not-defined – cleon briones Dec 13 '21 at 19:47
i use it in the client side – RégisLeRégisseur Dec 13 '21 at 19:49
so the problem here is that require() is not built-in the browser. You have to use tools like browserify which is the main purpose is to bundle JavaScript files for usage in a browser. Have a look at their github and try to install them https://github.com/browserify/browserify#usage – cleon briones Dec 13 '21 at 19:57
i have checked the first link you sent and they were saying that using webpack will fix my problem with require but now that webpack is installed, my problem isn't fixed, i'm trying to look at the second link – RégisLeRégisseur Dec 13 '21 at 20:04
it doesnt work with browserify, what should i do – RégisLeRégisseur Dec 13 '21 at 20:09
do you have a github repo? Maybe I can check it out – cleon briones Dec 13 '21 at 20:11
i don't have a github repo but i think i can create one – RégisLeRégisseur Dec 13 '21 at 20:12
sorry but i dont know why my github account is flagged so you can't access the repo, bad day sad day – RégisLeRégisseur Dec 13 '21 at 20:36

how to read data from a json file in javascript

3 Answers3