Basic To Do app not working


#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


#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.


#15

Your server/main.js should contain this line ONLY

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


#16

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

Thanks so much!


#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