Array .map() returning undefined

Question

This is the structure of the array when I console.log it.

-[]
  -0: Array(31)
    -0:
      -date: "2018-08-26T00:00:00-04:00"
      -registered:
        -standard: 0
        -vip: 0
      -waitlisted:
        -standard: 0
        -vip: 0

This is my code to map the date and the registered (two separate arrays):

this.data.map((value) => value.date);
this.data.map((value) => value.registered['standard']);

I either get an empty array or undefined when I log these. What am I doing wrong?

I want to use these for a chart using ChartJS where:

this.lineChart = new Chart(lineCtx, {
  type: 'line',
  data: {
    datasets: [{
      label: (I want the dates to be the labels),
      data: (I want the list of standard registrants)
    }]...

EDIT:

I've updated the way I get the data to show the following structure:

{
  "registrationHistory": [{
    "date": "2018-08-26T00:00:00-4:00",
    "registered": {
      "vip":0,
      "standard":0
    },
    "waitlisted":{
      "vip":0,
      "standard":0
  }
  {
   ,...
  }
]}

Please add the complete array, do console.log() on that array and provide that in your question. — Ankit Agarwal
– Ankit Agarwal, Commented Sep 24, 2018 at 12:06
Tip: you can also share your array easily if you do JSON.stringify(data), where data is your array. — Juan Elfers
– Juan Elfers, Commented Sep 24, 2018 at 12:09
The array has 31 objects in it, I'm not sure how you would like me to display that here. — brettwbyron
– brettwbyron, Commented Sep 24, 2018 at 12:43

timclutton · Accepted Answer · 2018-09-24 12:47:30Z

1

Your array is two-dimensional and map is iterating only the first dimension, i.e:

-[]
  -0: Array(31)     // first dimension
    -0:             // second dimension
      -date: "2018-08-26T00:00:00-04:00"
      ...

This would look like the following JSON string:

[[{"date":"2018-08-26T00:00:00-04:00", ...}]]

Since you haven't provided a full example it's impossible to recommend the most applicable solution:

If you control the data source, remove the first dimension since it appears redundant.
Assuming you only want the first element of the first dimension, refer to that key:
```
this.data[0].map((value) => value.date);
```

If your data model is more complex than revealed in your question you'll need to figure out another approach.

answered Sep 24, 2018 at 12:47

timclutton

13.1k3 gold badges37 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

timclutton Over a year ago

@brettwbyron Did this answer your question?

Collectives™ on Stack Overflow

Array .map() returning undefined

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related