What is the reason behind receiving undefined when using tableRow.get() in p5.js?

Currently, I am experimenting with incorporating geolocation data into a data table using p5. However, I have encountered an issue where p5 is unable to load data from tableRow.get(). When I print the values of lat and lon, it shows them as undefined. What could be causing this problem?

let Soho;
let table;
let lat, lon, xgeo, ygeo;

let mapGeoLeft = -0.1424;
let mapGeoRight = -0.131;
let mapGeoTop = 51.5164;
let mapGeoBottom = 51.5093;

function preload() {
  soho = loadImage("cholera.png");
  table = loadTable("cholera.csv");
}

function setup() {
  createCanvas(600, 600);
  background(soho);
}

function draw() {
  for (let r = 0; r < table.getRowCount(); r++) {
    let tableRow = table.rows[r];
    lat = tableRow.get("lat");
    lon = tableRow.get("lon");

    xgeo = map(lon, mapGeoLeft, mapGeoRight, 0, width);
    ygeo = map(lat, mapGeoTop, mapGeoBottom, 0, height);

    fill(255, 0, 0);
    strokeWeight(0.5);
    circle(xgeo, ygeo, 5);
  }
  print(lat);
  noLoop();
}

Here is a snippet showing the first few lines of data from the table:

count,lon,lat
3,-0.13793,51.513418
2,-0.137883,51.513361
1,-0.137853,51.513317
1,-0.137812,51.513262
4,-0.137767,51.513204
2,-0.137537,51.513184

Answer №1

To inform the table parser of a header, utilize the third argument:

loadTable("cholera.csv", "csv", "header");

Following this adjustment, the remainder of your code should function as expected. Consult the documentation for loadTable.


Remember to always use const or let instead of creating global variables. For instance, change

lat = tableRow.get("lat");
to
const lat = tableRow.get("lat");
, among other corrections.

Additionally, use let soho rather than let Soho.

These errors in typing and variable scoping can result in subtle bugs.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trigger an event upon completion of a write operation in AngularJS

I want to trigger a search after my user finishes typing (without hitting enter) in AngularJS. Here is a simplified version of my HTML: <div ng-class="input-append" ng-controller="searchControl"> <input type="text" ng-model="ajaxSearch" ng-cha ...

Extract the selected date from the datepicker and showcase it within a designated div element

I need to retrieve the selected date from a jQuery UI datepicker and show it in two places on the page. Currently, the selected date is displayed in the input field of the datepicker, but I also want to display it within a div tag elsewhere on the page. ...

Jquery function for determining height across multiple browsers

I am currently facing an issue with setting the height of table cells in my project. While everything works smoothly on most browsers, Firefox seems to add borders to the overall height which is causing inconsistency across different browsers. If anyone k ...

Ordering dates by week in AngularJS 1

Currently, I have a list of objects: [{ name: one, date: 2017-09-18 }, { name: two, date: 2017-09-11 }, { name: three, date: 2017-09-13 }] I am looking to organize this list by week. Perhaps like the following structure: { 1week(or , m ...

Exploring the Power of React's Ref API

Currently, I am following tutorials on Udemy by Max where he discusses how to work with Ref Api's in React 16.3. In one of the lectures, he demonstrated creating a ref inside a container class, not App.js, using this.lastref = React.createRef();. He ...

Removing all text inside an input field with Vue

I am trying to create a password input field using type 'text' instead of 'password.' <input type="text" v-model="form.password" @input="test" /> <input type="hidden" v-model="form.hiddenPassword" /> As part of my approach ...

Tips for improving the readability of my code

This code snippet pertains to handling a POST request in Express.js with MongoDB integration. router.post('/', function(req, res){ var data = req.body; Tag.find({name: data.name}).limit(1).exec( function(err, result){ if(err) { // ...

Ensuring the length of an array meets security requirements in Firebase rules

Can the votes array be restricted to exactly 5 entries? Checking if newData.child('votes').val().length === 5) doesn't work because the length property only applies to strings. Here is a sample of my data: votes $voteID page:"12345 ...

Change the defaultValue of a React component following a successful request

In my project, I am dealing with a DropDown component from a separate library that renders various options. The component supports an array of objects as its source and setting a default value is straightforward when the list is static. However, I'm f ...

Creating a dynamic multi-select feature in AngularJS with ng-repeat

I'm relatively new to AngularJS and JavaScript, but I've managed to create a functional multi-select list. The ng-model linked to the dropdown is part of a "user" DTO object, specifically a property that stores an array of "groups" the user can j ...

child object rotated to face the Camera, utilizing lookaAt() and worldToLocal() methods within the Three.js framework

I am facing an issue with the three.js built-in lookAt() method related to my hierarchical Object structure setup. var obj1 = new THREE.Object3D(); obj1.position.x=200; obj1.rotation.x=0.1; scene.add(obj1); var obj2 = new THREE.Object3D(); obj2.position. ...

What is the most effective way to incorporate JavaScript into a PHP function?

Hey there, I'm currently working on a PHP function that returns HTML/JS content. However, I feel like the approach I'm taking is inefficient and not the best way to do it. Do you have any suggestions for a better method? Here is a simplified ver ...

Angular: Built-in solution for managing unhandled HTTP errors

I have implemented a default handler for handling http errors in my angularjs app as shown below: myapp.config([ '$httpProvider', function($httpProvider) { $httpProvider.responseInterceptors.push('errorInterceptor') }]) The errorI ...

Sending information from Vue to Express for processing

Is there a way to pass data from Vue to an express server? For example, in the scenario below, I am looking to send the data logged in my Vue function to the "id" variable on the server side. expressApp.post('/delete' , function (request, respons ...

How can a JS script determine the shape of a quadrilateral based on its properties?

Hi there! I'm new to coding and could use some guidance. I've been given a task to create a script that takes input for the length of each side and the angles of each corner in order to determine whether the shape is a square, rectangle, rhombus ...

Achieving camera zoom in threeJS without the use of trackball controls or any other camera control libraries

Currently, I'm utilizing threeJS to manipulate a camera within my scene. The camera is configured to orbit in a circular motion around an object when the left and right keys are pressed on the keyboard. However, I am seeking guidance on how to impleme ...

Transmit an array using a GET Request

I am currently working on a project where I need to make a GET request from JavaScript to Python and pass a 2D array. Here is an example of the array: [["one", "two"],["foo", "bar"]] However, I am facing issues with passing this array correctly. In my Ja ...

Where do JQuery and framesets vanish to?

Whenever I attempt to use the console to create an element with the tag frameset, it returns no result: $('<div id="content" data-something="hello" />') => [<div id=​"content" data-something=​"hello">​</div>​] $(&apo ...

How can we effectively implement conditional rendering when dealing with components that are nearly identical?

Depending on whether the user is a professor, student, or not logged in, I render different landing pages. The landing pages are quite similar, with the only distinction being the buttons displayed. While I could easily achieve this using inline conditions ...

Having trouble getting the ValidatorPipe to function properly in my nest.js application

Issue Description There is an issue with the current behavior where initializing a validation pipe for a request body does not reject invalid types as expected. Desired Outcome The expected behavior should be that when a user provides a value that does n ...