Error with JSON data ("Expected a JSON object, array or literal")

Question

I'm following a JSON tutorial and I've run into a problem.

I'm using Visual Studio Code, and I have an HTML file, a JS file, and a JSON file. Even though the data in the JSON file is (to the best of my understanding) correctly formatted, VSCode gives me the following error:

Expected a JSON object, array, or literal.

Right now, the JS file is empty. The code in my HTML file is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>SANDBOX</h1>
    <div class="output">

    </div>
</body>
<script src="data.json"></script>
<script src="app.js"></script>

</html>

and the data in my .JSON file is:

const json = {
    "books": [{
        "title": "Learn to Code",
        "author": "John Smith",
        "isbn": "324-23243"
    }, {
        "title": "The Adventures JSON",
        "author": "Jason Jones",
        "isbn": "3324-2-444"
    }, {
        "title": "New Objects",
        "author": "Jane Doe",
        "isbn": "2343-234-2433"
    }]
};

I don't understand why I'm getting this error.

Things I've tried:

Following the tutorial - The tutor doesn't seem to have this problem, for some reason.
Wrapping the JSON data in curly braces - This just throws three more errors: Property keys must be doublequoted, Colon expected, and End of file expected.
Searching this site for similar questions - I've found similar questions, but the solutions offered don't solve my problem. I'm always left with the original error, 'Expected a JSON object, array or literal'.

Any help you could provide would be very much appreciated.

Your file name is .json but the content is javascript. Try renaming it to .js or removing const json = (but not both). — ray
– ray, Commented Oct 16, 2021 at 19:30

scr2em · Accepted Answer · 2021-10-16 19:29:58Z

4

you can't use javascript inside .json file

change .json file to

[{
        "title": "Learn to Code",
        "author": "John Smith",
        "isbn": "324-23243"
    }, {
        "title": "The Adventures JSON",
        "author": "Jason Jones",
        "isbn": "3324-2-444"
    }, {
        "title": "New Objects",
        "author": "Jane Doe",
        "isbn": "2343-234-2433"
    }]

instead load your json file inside the app.js

const books = require("my.json")

BUT

if you wish to use it like that then you have to change the format of my.json to my.js

answered Oct 16, 2021 at 19:29

scr2em

1,04410 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

Error with JSON data ("Expected a JSON object, array or literal")

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related