I use d3.CSV() function, and it works. Nevertheless, it gives a blank error! I have to figure out this problem as it may cause complications later.

CSV file:

Food,Rating
Pizza,90
Ice Cream,92
Spaghetti,85
Tuna Salad,75

Script:

<script>
                       
        d3.csv("food.csv", function(error,data) {

            if (error) {
                console.log("error messages: ", error)
            } else  {
                console.log(data)
            }
           
        })
       
   </script>

Output:

test.html:17 error messages:  {Food: 'Pizza', Rating: '90'}
test.html:17 error messages:  {Food: 'Ice Cream', Rating: '92'}
test.html:17 error messages:  {Food: 'Spaghetti', Rating: '85'}
test.html:17 error messages:  {Food: 'Tuna Salad', Rating: '75'}

Line 17 in the HTML file is:

console.log("error messages: ", error)

Update Aug 15, 2022

D3.js version: I got this link from the D3.js website

https://d3js.org/d3.v7.min.js

Based on Dan's suggestion, I tried the following block of code:

d3.csv("food.csv").then(data => {
      console.log(data)
   }).catch(error => {
      console.error(error)
})

I get results without any error message. Now, I want to induce an error to check on error reporting, I change food.csv to food1.csv. I don't get results, but there is no error message. I get all the HTML elements listed in the console like the old fashion code's output.

I tried the following code with the wrong name for the CSV file to induce an error and see if I could get any error message:

d3.csv("food1.csv").then(data => {
      console.log(data)
   }).catch(error => {
      console.log("There is an error: ",error)
   })

Same as the old fashion code, instead of an error message, I get all the HTML elements of the page in an array as the output in the console.

How can we get a decent error message from d3.csv()?