My variables will log to the console but not write to a div

p5.js Coding Questions
1

Hi. So I’ve again been following a p5 tutorial on youtube (coding train woowoo!) and I’ve adapted it to use my own data to map Covid statistics by state. And everything works in terms of the data showing up in the console the way I want it to, but then when I try to write it to a div it writes one line and the variables show up as undefined. Am I maybe making some obvious error?

            getData(); //call function
            
            async function getData(){ //define an asynchronous function

                var response = await fetch('covid.csv'); //call data and assign it to a variable
                var data = await response.text(); //parse the text from the response and assign it to variable
                
                var table = data.split('\n').slice(1); //delineate rows of the table by splitting them at the line break. This results in an array such as: [0] Alaska, 12, 1.33 etc
                    
                table.forEach(row => {
                    var columns = row.split(','); 
                    var state = columns[0];
                    var deaths = columns[1];
                    var deathsPer = columns[2];
                    
                    console.log(state, deaths, deathsPer);
                             
                    document.getElementById("myDiv").innerHTML = 
                    state + 
                    " death toll is " + 
                    deaths + 
                    " and a death rate of " + 
                    deathsPer
                    ;
                });
            }
2

I’m taking the lack of suggestions to mean that everyone else is stumped too. It’s really strange, it’s a simple bit of code using things that work for me elsewhere, there are no console errors, the text shows up in the div just fine, and I’ve even showed it to a coder friend who was also stumped. He thought maybe it has something to do with needing to parse or interpret the variables to get them to show up, but even he couldn’t figure it out. Very strange indeed…

Edit: the one thing I have noticed is that the ‘state’ variable doesn’t show up in the div’s text at all, while the other two show up as ‘undefined’ in the div. So while I would expect it to read:
undefined death toll is undefined and a death rate of undefined

Instead it reads:
death toll is undefined and a death rate of undefined

3

Without seeing the complete code, it’s hard to guess, but I do see one issue when you set the innerHTML of a div. it’s that you have multiple rows but you keep updating the same div, so at the end only the last value will appear on screen. Instead, you’d want to create a new div for each row.

Here is my code:

    function setup() {
      getData(); //call function
    }

    async function getData() { //define an asynchronous function

      var response = await fetch('test.csv'); //call data and assign it to a variable
      var data = await response.text(); //parse the text from the response and assign it to variable

      var table = data.split('\n').slice(1); //delineate rows of the table by splitting them at the line break. This results in an array such as: [0] Alaska, 12, 1.33 etc

      table.forEach(row => {
        var columns = row.split(',');
        var state = columns[0];
        var deaths = columns[1];
        console.log(state, deaths);

        const newDiv = createDiv(`${state} - ${deaths}`)
        // myDiv.child(newDiv)
      });
    }
2 Likes
4

Interesting… I’ve never run into that being a problem before. I’ll work on your solution thanks. The only other code I didn’t include is just the empty div.

5

Aargh… so I’ve tried working with your code and I can’t get anything to display or even console log. It logs the first row and then I get this error message:

simpleCsvParseCOVID.html:70 Uncaught (in promise) ReferenceError: createDiv is not defined
at simpleCsvParseCOVID.html:70
at Array.forEach ()
at getData (simpleCsvParseCOVID.html:63)

6

can you post your code (minimal and reproducible)? along with the csv.

1 Like
7

I’m new to github, but does this work?

8

That works, https://editor.p5js.org/ would be better.
In your CSV, there is an empty line at the end - that also counts as a row with no data. remove and try again.

1 Like
9

Thanks, I noticed that, but nothing I try works. I select all the empty rows in my csv file and ‘delete all’ but it’s still there… any ideas?
EDIT: I’m still unable to delete the empty row from the CSV, however I added the number -1 to the slice method as per Mozilla’s page and now it cuts off that blank row. And I see what you’re saying, it is in fact populating the div as I wanted but it’s only displaying the last row.
I updated the file in github as well.

So is it that the div is quickly cycling through all the rows? And is the only solution to create a div for each individual row? If so I’ll keep working on the code you posted above, it won’t work for me though.

10

When I removed the last row and saved the csv, it worked for me. (no undefined)
And yes, you want to create a div for each row. You can cycling through every row, but at the end, only one div gets updated.

1 Like
11

Do I need to have jquery installed?

12

I will need to correct my statement - depending on what you want to do, yes, you can add to the existing div. I was only thinking in terms of a table, but if you want to write everything as sentences, adding to the div makes sense.

function setup() {
  createCanvas(400, 400);

  const div = createDiv('test')
  div.attribute('class', 'test')

  for (let i = 0; i < 10; i++) {
    document.querySelector('.test').innerHTML += i + ' '
  }
}
1 Like