I get the following error when I try to load a JSON file for a project I am building with Parcel.
Uncaught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
the json file: names.json is an object with one parameter holding an array of names:
{"names": ["john","Jen","Joe"]}
The code I am using to try to import the file is:
d3.json("names.json").then(function(data) {
console.log(data);
});
The information in the error indicates that the d3.json call is returning HTML (maybe an error) instead of json, but I can not figure out why.
If I convert the json file to names.js by changing it to:
export default {"names": ["john","Jen","Joe"]}
Then I can bring the data in with
import names from './names';
Without any trouble. The problem with this option is the site I am building will decide between a number of files based on user input.
I want to use d3.json to limit the number of files that need to be loaded up front.
The error above is from chrome. The exact wording of the error varies in safari and firefox, but all of them suggested the same thing: the call is returning HTML or some other non-json format.
Added on edit:
here is what the network tab looks like. The red line shows when the error occurs, but this tab does not seem to add any additional information.
It looks like a parcel problem. The following code:
<!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>D3 json test on server</title>
</head>
<body>
<div id='targetdiv'></div>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script>
d3.json("names.json").then(function(fileNames) {
console.log(fileNames);
});
</script>
</body>
</html>
Works when I use the same json file on a server.