Javascript fetch API doesnt work when used in EJS file

Question

I am trying to fetch a file called files.json from the root directory of the (locally hosted) NodeJS backend and then print it out in the console.

<script>
fetch("./files.json")
    .then(res => {
        return res.json();
    })
    .then(obj => {
        console.log(obj);
    })
    .catch(err => {
        console.error(err);
    });
</script>

Using this code in the index.ejs file delivers the following error in the browser's console:

GET http://localhost:3000/files.json [HTTP/1.1 404 Not Found 2ms]
SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

However, when I use the exact same code in an .html file that's hosted locally with Visual Studio Code's LiveServer plugin, I get the desired result:

Object { files: (3) […] }

If it's relevant, files.json has the following content:

{
"files": [
    {
        "name": "testfile1"
    },
    {
        "name": "testfile2"
    },
    {
        "name": "testfile3"
    }
]
}

Barrios · Accepted Answer · 2021-05-16 14:19:27Z

1

You need to convert your data output into string i.e.,

 var yourDataStr = JSON.stringify(yourdata)

and then validate your data with:

JSON.parse(yourDataStr)

answered May 16, 2021 at 14:19

Barrios

655 bronze badges

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

Comments

Ghost · Accepted Answer · 2021-05-16 14:24:00Z

1

I am not sure but I think that fetch() won't work with NodeJS. It is only native feature in browsers (Client-side Javascript) So it won't work in NodeJS. To solve this you must download Library in NodeJS that will support fetch() in NodeJS like node-fetch.

Install node-fetch using npm install node-fetch.
Then try this example :

fetch('') // Here add location for JSON file
            .then(res => res.json())
            .then(json => console.log(json));

answered May 16, 2021 at 14:24

Ghost

5,2047 gold badges24 silver badges50 bronze badges

Collectives™ on Stack Overflow

Javascript fetch API doesnt work when used in EJS file

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related