Basic To Do app not working

help
1

here is my code. any ideas on what i’m doing wrong? Thanks in advance.

//client/main.html
    <head>
      <title>simple</title>
    </head>

//server/main.js
    import { Meteor } from 'meteor/meteor';
    Meteor.startup(() => {
      // code to run on server at startup
        console.log('started');
    });

//imports/ui/body.html
    <body>
      <div class="container">
        <header>
          <h1>Todo List</h1>
        </header>
     
        <ul>
          {{#each tasks}}
            {{> task}}
          {{/each}}
        </ul>
      </div>
    </body>
 
    <template name="task">
      <li>{{text}}</li>
    </template>

//imports/ui/body.js
    import { Template } from 'meteor/templating';
    import { Tasks } from '../api/tasks.js'; 
    import './body.html';
 
    /*Template.body.helpers({
      tasks: [
        { text: 'This is task 1' },
        { text: 'This is task 2' },
        { text: 'This is task 3' },
      ],
    });*/

    Template.body.helpers({
      tasks() {
        console.log(Tasks.find({}));
        return Tasks.find({});
      }
    });

//api/tasks.js

    import { Mongo } from 'meteor/mongo';
    export const Tasks = new Mongo.Collection('tasks');

/client/main.js
    import '../imports/ui/body.js';
    import '../imports/api/tasks.js';
2

What is not working? What error message do you get?

3

I just get a blank to do list with no js errors in the console. Should I look for errors elsewhere?

4

I don’t think this part is working.

5

It seems that your mongo db is empty.
Try in the terminal

meteor mongo

and then

db.tasks.find()

to see if your db is empty.
You can insert a new one like so

db.tasks.insert({ text: “Hello world!”, createdAt: new Date() });

6

i tried that :frowning:

{ “_id” : ObjectId(“5704000b991a5998e93a1c65”), “text” : “Hello World!”, “createdAt” : ISODate(“2016-04-05T18:12:27.719Z”) }
{ “_id” : ObjectId(“57040156991a5998e93a1c66”), “text” : “Hello world 2!”, “createdAt” : ISODate(“2016-04-05T18:17:58.881Z”) }

7

It’s been a while since I’ve used Blaze, but don’t you have to pass the text to the “task” template?

8

What’s the code in your helpers look like for that template?

Also, show the html for your template

9

I don’t think im using blaze. not sure what that is.

10

all code including helpers and template file are shown in my first post right?

11

Blaze is the view engine you’re using. :slight_smile:

12

If I uncomment the hard coded tasks it works fine, but if i leave

Template.body.helpers({
  tasks() {
    return Tasks.find({});
  }
});

It does nothing

13

EDIT: You can still try the following, but I see you are missing a comma after the 2nd to last }.

I think you’re missing something in your code if uncommenting the hard coded tasks works. Check the following.

imports/ui/body.js should be:

import { Template } from ‘meteor/templating’;

import { Tasks } from ‘…/api/tasks.js’;

import ‘./body.html’;

Template.body.helpers({
tasks() {
return Tasks.find({});
},
});

server/main.js should be:

import ‘…/imports/api/tasks.js’;

imports/api/tasks.js should be:

import { Mongo } from ‘meteor/mongo’;

export const Tasks = new Mongo.Collection(‘tasks’);

You should remove or comment out everything else in those files

1 Like
14

Probably you are not inserting the tasks to the right collection.

Even i got the same problem initially.

  • In my case,I opend mongo console using “meteor mongo” command and created a tasks collection( command “use tasks”).
  • Then i run inserted a record into it( “db.tasks.insert({ text: “Hello world!”, createdAt: new Date() });”).
  • Nothing was comming to the screen !.Its because i inserted the tasks to a different collection.
  • Meteor collections will be inside meteor db.
  • “use meteor” ->will go to meteor db.
  • then “show collections” will show the collections inside meteor,now it should return a list of collection and our “tasks” collection will be there.
  • now try db.tasks.find({}),if it is empty you inserted the task into a different colection.

Verify that you inserted the tasks to the right collection.

884×229 6.09 KB

15

Your server/main.js should contain this line ONLY

import ‘…/imports/api/tasks.js’;

2 Likes
16

That was it! server/main.js had random stuff in it.

Thanks so much!

1 Like
17

I got the exactly same issue, and I tried everything you guys mentioned, but still no changes. Plz tell me how to fix it. Thx!

18

Finally! got this.

At the beginning i made the same mistake as you did.
We put the line

../imports/api/tasks.js';

in /client/main.js
but it should be /server/main.js

After i found this and corrected it, it still don’t work

So, i recreate the whole app, then it finally works.

19

was going through the same thing, this seems obvious now it really helped. Thanks alot