Meteor 1.3 populate select from db


#1

Hi guys, I’m trying to just populate a select from the db. The select works with fix options but not with data from the collection.

For now, I have not removed autopublish package yet as I’m learning.

It looks like the collection is not visible. If I type CarBrands.find() in the browser’s console (Chrome) it says: “Uncaught ReferenceError: CarBrands is not defined”.

I consider I have not to publish and subscribe anything at this point.

I am following the todos tutorial but with my own idea instead of the todo list. Also, I am using meteor 1.3 (with the imports and all that stuff, as the tutorial shows)

Any help is more than welcome.

Thanks in advance.

This is my code:

utilities.js

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

startJob.js

    import { Template } from 'meteor/templating';
    import { CarBrands } from '../api/utilities.js';
    import './body.html';
    import './startJob.html';

    Template.startJob.helpers({
       carBrands() {
           return CarBrands.find({});
       }  
    });

startJob.html

    <template name="startJob">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">
                    Car Details
                </h3>
            </div>
            <div class="panel-body">
                <div>
                    <form class="form-horizontal">                    
                        <div class="form-group">
                            <label for="carBrand" class="col-sm-2 control-label">
                                Make
                            </label>
                            <!-- <div class="col-sm-10">
                                <input type="text" class="form-control" id="carBrand"/>
                            </div> -->
                            <div class="col-sm-10">
                            <select id="carBrand" class="demo-default" placeholder="Select a brand...">
                                <option value="">Select a brand...</option>
                                <!-- <option value="1">Temp</option> -->
                                <div>
                                {{#each carBrands}}
                                    <option value="{{_id}}">{{brandName}}</option>
                                {{/each}}</div>
                            </select>
                            </div>
                        </div>                    
                    </form>
                </div>
            </div>
        </div>    
    </template>

body.html

    <body>
        <div class="container">
        	{{> startJob}}       
        </div>
    </body>

main.html

    <head>
      <title>Job Done!</title>
 `   </head>

main.js

import '../imports/ui/startJob.js';

#2

Please wrap your code and template examples in triple backticks, like this:

```
paste
  your
    code
      here
```

#3

done… Thanks for let me know that


#4

You won’t see CarBrands in your console unless you explicitly define it as global. Currently, it’s available only where it’s been imported.

Is that your complete code?

Do you have a repo we can look at? I’m interested in looking at your folder structure.

BTW - I don’t think you want to wrap your <option>s in a <div>.


#5

That is not all my code. I’ve done a bit more things which are working as expected. My repo is not public. This image of my file structure works? Any other thing I can provide just let me know. Thanks for helping!


#6

And the main.js in your original post - which one is that?

Are you importing your collection on the client and the server?


#7

BTW - If I do not wrap it like that, I get this ugly exception in the browser’s console

    Exception in queued task: Error: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
        at Error (native)
        at DOMRange.detach (http://localhost:3000/packages/blaze.js?hash=ef41aed769a8945fc99ac4954e8c9ec157a88cea:508:24)
        at DOMRange.setMembers (http://localhost:3000/packages/blaze.js?hash=ef41aed769a8945fc99ac4954e8c9ec157a88cea:467:12)
        at DOMRange.addMember (http://localhost:3000/packages/blaze.js?hash=ef41aed769a8945fc99ac4954e8c9ec157a88cea:536:10)
        at http://localhost:3000/packages/blaze.js?hash=ef41aed769a8945fc99ac4954e8c9ec157a88cea:2795:32
        at Object.Tracker.nonreactive (http://localhost:3000/packages/tracker.js?hash=6f5d0f5486aaa54b0abe636174eeb06dcc2a736b:617:12)
        at Object.eachView.stopHandle.ObserveSequence.observe.addedAt (http://localhost:3000/packages/blaze.js?hash=ef41aed769a8945fc99ac4954e8c9ec157a88cea:2767:17)
        at Object.cursor.observe.addedAt (http://localhost:3000/packages/observe-sequence.js?hash=550c39b36ab0e65194ea03cdc7ecbe99dcdd07f6:363:19)
        at observeChangesCallbacks.addedBefore (http://localhost:3000/packages/minimongo.js?hash=f636910493635f8b630c45a605cd39ce5db2d58f:3675:28)
        at Object.self.applyChange.addedBefore (http://localhost:3000/packages/minimongo.js?hash=f636910493635f8b630c45a605cd39ce5db2d58f:3612:56)

#8

Tha main.js in my original post is /client/main.js

import '../imports/ui/startJob.js';

The other one is /server/main.js

    import { Meteor } from 'meteor/meteor';

    Meteor.startup(() => {
      // code to run on server at startup
    });

    import '../imports/api/utilities.js';

#9

Your server main.js needs to

import { CarBrands } from '../api/utilities.js';

Also, that template <select> with <div> definitely looks janky to me. Are you sure this won’t work:

<select id="carBrand" class="demo-default" placeholder="Select a brand...">
  <option value="">Select a brand...</option>
  {{#each carBrands}}
    <option value="{{_id}}">{{brandName}}</option>
  {{/each}}
</select>

#10

I just modified the file you say but it still does not work. Additionally, that makes no sense to me (sorry for my ignorance).

The select as you say was my first version till I saw the exception I said before. Reading about that I found that weird solution and effectively, the exception disappeared. Do not ask me why or how :slight_smile:

Please notice that what I am doing is based on the instructions of the official tutorial I mentioned in my original post


#11

Almost good news. I just modified my helpers and the collection is being accessed:

    Template.startJob.helpers({
        carBrands() {
            console.log(CarBrands.find().count());
            return CarBrands.find();
        },
    }); 

The browser’s console is printing the info. So, the problem might be in the select


#12

Ok, the problem is the component I was using (selectize) and it is referenced in here. Also, in my last comment in that thread there is a better way to use a nice select in a meteor app. It is working in meteor 1.3.


#13

based on your code, the carBrands helper should be returning CarBrands.find().fetch() to access the data, instead of the cursor?


#14

Sorry for the late reply mate. The helper works well as it is. No need .fetch()


#15

wow didn’t know spacebars could do that, very cool!