Parse variables from local JSON file in vanilla JS

Question

I am trying to get access to stored values from local JSON files.

I load the JSON via

let json_url = "./static/" + captureMode + ".json";
let jsondata = {};
await fetch(json_url)
 .then(response => response.json())
 .then(data => jsondata = data);

But when trying to parse via let parsedData = JSON.parse(jsondata); I get the error "Uncaught (in promise) SyntaxError: "[object Object]" is not valid JSON".

Edit: Also directly trying to access values from jsondata after response.json() does result in an undefined output. Does anybody have an idea what's happening?

EDIT:

The JSON looks like this:

{
    "CameraSettings": {
        "rawOnOff": true,
        "shutter": 10000,
        "autoWhiteBalance": false,
        "exposureMode": "normal",
        "exposure": 0,
        "gains1": 1.6,
        "gains2": 1.5,
        "width": 4500,
        "height": 3600,
        "filename": "Before_Val_",
        "counter": 0,
        "sharpness": 1,
        "contrast": 1,
        "brightness": 50,
        "saturation": 0,
        "videoBitrate": 100,
        "videoFPS": 16.666,
        "videoLength": 1000,
        "accuracy": 100000,
        "framecount": 1,
        "offset": 0,
        "skipped_frames": 0
    }
}

{ "CameraSettings": { "rawOnOff": true, "shutter": 10000, "autoWhiteBalance": false, "exposureMode": "normal", "exposure": 0, "gains1": 1.6, "gains2": 1.5, "width": 4500, "height": 3600, "filename": "Before_Val_", "counter": 0, "sharpness": 1, "contrast": 1 } } — Too Long Din't Read
– Too Long Din't Read, Commented Sep 3, 2022 at 14:43
Add this to the question too, you can edit it. So others can see it easier. But this already looks like json to me on first glance? — cloned
– cloned, Commented Sep 3, 2022 at 14:44
It's just a typo-level error. "But when trying to parse via let parsedData = JSON.parse(jsondata); I get the error "Uncaught (in promise) SyntaxError: "[object Object]" is not valid JSON"." When you do response.json(), the promise it returns is fulfilled when the body text has been read and parsed. So you don't want to do JSON.parse(jsondata); jsondata (which will want renaming) is already parsed, it's already an object. So passing it into JSON.parse (which requires a string) does the implicit conversion to string, which gives you the string "[object Object]". — T.J. Crowder
– T.J. Crowder, Commented Sep 3, 2022 at 14:53
More in MDN's documentation: developer.mozilla.org/en-US/docs/Web/API/Response/json Side note: You should check that the HTTP request worked (sadly, there's a footgun in the fetch API -- it only rejects its promise on network errors, not HTTP errors). I have a writeup about it on my anemic old blog here. — T.J. Crowder
– T.J. Crowder, Commented Sep 3, 2022 at 14:54

Wilderness Ranger · Accepted Answer · 2022-09-03 14:59:03Z

1

That's because jsondata is already the parsed object, as response.json() will parse the responsed JSON text. You may just use jsondata as parsedData.

Besides, it's really strange and unclear to use await and Promise.prototype.then() at the same time. I think the code can be improved to:

let response = await fetch(json_url);
let parsedData = await response.json();

edited Sep 3, 2022 at 14:59

answered Sep 3, 2022 at 14:56

Wilderness Ranger

3122 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Wilderness Ranger Over a year ago

@TooLongDin'tRead Well, you can read more about await feature and compare it with promise methods on MDN here. Please accept my answer if it is helpful.

Collectives™ on Stack Overflow

Parse variables from local JSON file in vanilla JS

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related