Meteor, ChartsJS and MongoDB

Question

I want to iterate through the MongoDB collection to get the chart labels but I get TypeError: undefined is not an object (evaluating 'teams[i].name') here is my code:

var teams = Teams.find();
var teamNames = [10];

for(i = 0; i < 10; i++)
{
    teamNames.push(teams[i].name);
}

var chart = new Chart(canvas, {
    type: 'bar',
    data: {
        labels: [teamNames]

....

Anyone any suggestions? I am running out of ideas. Thank you in advance.

I think `Teams.find()` returns a cursor. Try `Teams.find().fetch()` to get objects. More here https://docs.meteor.com/api/collections.html#Mongo-Collection-find — s7vr, Mar 14 '17 at 20:02

score 1 · Answer 1 · answered Mar 14 '17 at 21:16

1

You can do this

var teamNames = Teams.find().map(
   function(team){
      return team.name;
   }
)

answered Mar 14 '17 at 21:16

mutdmour

543
5
14

score 0 · Answer 2 · answered Mar 14 '17 at 19:43

0

teams must have a length of less than 10 items. If teams is [{name: "first"}], then teams[1] will return undefined and you will get that error. You can use:

for (let i = 0; i < teams.length; i++)

to solve this problem.

You can also map over the array to get specific properties:

labels: teams.map(team => team.name),

answered Mar 14 '17 at 19:43

Explosion Pills

188,624
52
326
405

That doesn't work... TypeError: undefined is not an object (evaluating 'teams[0].name') – Klaudia Bojda Mar 14 '17 at 19:48
@KlaudiaBojda in that case `teams` is not an array. I think the issue is that you have to call methods on the cursor returned by `.find` – Explosion Pills Mar 14 '17 at 21:29

score 0 · Answer 3 · answered Mar 15 '17 at 00:18

In Meteor, the Collection .find() function returns a cursor that you can then use to perform operations on collection items. In your case, you are treating the cursor as if it were an array which is incorrect. There are a few different ways that you can approach this.

1) Use .forEach() to iterate over the cursor.

var teamNames = [];

Teams.find().forEach(function (e) {
  teamNames.push(e.name);
});

2) Use .fetch() to return all matching documents in an array, then iterate over that.

var teams = Teams.find().fetch();
var teamNames = [];

for(i = 0; i < teams.length; i++) {
  teamNames.push(teams[i].name);
}

3) Use .map() to iterate over the collection calling the callback on all items and returning an array.

var teamNames = Teams.find().forEach(function (e) {
  return e.name;
});

Meteor, ChartsJS and MongoDB

3 Answers3