d3.csv() function from D3.js library works but gives a blank error

Question

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()?

What's the d3 version? That callback signature only works for v4 or less. — Gerardo Furtado, Aug 14 '22 at 23:18
`d3.csv()` uses the Fetch API internally. The fetch API will resolve (that is, nothing to *catch*) even if you have an 4xx error. For handling 4xx issues, have a look at the answers in the top blue box, they will show you how to throw the error. — Gerardo Furtado, Aug 16 '22 at 00:54

score 0 · Answer 1 · answered Aug 14 '22 at 23:43

0

The way that you are reading the file was deprecated in D3 version 5. In more recent versions of D3, you would do

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

You can find the documentation here.

answered Aug 14 '22 at 23:43

Dan

1,501
9
8

Thanks for your suggestion. However, this did not resolve the problem of error handling with d3.csv(). I tried several code blocks suggested by different websites, but they don't work. – EricandWeb Aug 15 '22 at 18:11

d3.csv() function from D3.js library works but gives a blank error

1 Answers1