chart.js - Javascript mapping contents of CSV file not working

Question

I'm trying to create two arrays each with a column from a CSV file. These will get used in Chart.js as data and label arrays.

CSV file contents:

DateTime, Reading
2021-01-05 21:33:05,987
2021-01-05 21:36:36,552
2021-01-05 22:35:08,1035
2021-01-06 14:00:00,111
2021-01-07 17:13:37,101

JavaScript code:

d3.csv("data.csv").then(makeChart);

function makeChart(data)
{
    console.log(data);
    var DateTimeLabels = data.map(function(d) {return d.DateTime});
    var ReadingsData = data.map(function(d) {return d.Reading});

    console.log(DateTimeLabels);
    console.log(ReadingsData);
...

In the console, the output is as follows:

[{DateTime: "2021-01-05 21:33:05",  Reading: "987"}, {DateTime: "2021-01-05 21:36:36",  Reading: "552"}, {DateTime: "2021-01-05 22:35:08",  Reading: "1035"}, {DateTime: "2021-01-06 14:00:00",  Reading: "111"}, {DateTime: "2021-01-07 17:13:37",  Reading: "101"}] (5)

["2021-01-05 21:33:05", "2021-01-05 21:36:36", "2021-01-05 22:35:08", "2021-01-06 14:00:00", "2021-01-07 17:13:37"] (5)

[undefined, undefined, undefined, undefined, undefined] (5)

Why does the ReadingsData array come up with undefined values and how can I fix it?

question from:https://stackoverflow.com/questions/65618116/javascript-mapping-contents-of-csv-file-not-working

Answer 1

Waitting for answers