Mongo Collection is not loading correctly

help
1

Hi,
I have just started learning Meteor and am stuck. I have a mongo collection with some data in it.

meteor:PRIMARY> db.Categories.find(); { "_id" : 1, "name" : "Office Maintenance" } { "_id" : 2, "name" : "Gas" } { "_id" : 3, "name" : "Meals and ent." } { "_id" : 4, "name" : "Hotels" } { "_id" : 5, "name" : "Travel" } { "_id" : 6, "name" : "Office supplies" } meteor:PRIMARY>

Rest of the code is almost copied from Meteor tutorial and then modified just a bit.

imports/api/categories/categories.js

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

imports/ui/Components/Categories.jsx

`
import React, {Component, PropTypes} from ‘react’;
export default class Category extends Component {
render() {
alert(“trying to render categories”);
return (

{this.props.category._id} {this.props.category.name}


);
}
} 
Category.propTypes = {
  category: PropTypes.object.isRequired,
};

`

imports/ui/Components/App.jsx

`
import React, {Component, PropTypes} from ‘react’;
import {createContainer} from ‘meteor/react-meteor-data’;
import ReactDOM from ‘react-dom’;

//importing Mongo collections
import {Categories} from '../../api/categories/categories.js';

//importing the Components
import Category from './Categories.jsx';

class Cbmax extends Component {

  renderCategories() {
    return this.props.categories.map((category) => (
      <Category key={category._id} category={category} />
    ));
  }

  render() {
    return (
      <div className="container">
        <header>
          <h2> Display Categories </h2>
        </header>

        {this.renderCategories()}

      </div>
    );
  }
}

Cbmax.propTypes = {
  categories: PropTypes.array.isRequired,
};

export default createContainer(() => {
  // Return all of your bonus categories
  return {
    categories: Categories.find({}).fetch(),
  };
  }, Cbmax);
  /*return {
    categories: [{"_id" : 1, "name" : "Gas"},
    {"_id" : 2, "name" : "Travel"},
    {"_id" : 3, "name" : "Office supplies"},
    {"_id" : 4, "name" : "Meals and entertainment"},
    {"_id" : 5, "name" : "Rent"},
    {"_id" : 6, "name" : "Maintenance"},],
  };
  }, Cbmax);*/`

If I try to use the hardcoded property ‘categories’ of Cbmax (currently commented out in App.jsx), everything works just fine. However, if I try to use the collection, renderCategories() function doesn’t even reach the ‘alert’ statement in the Category component.

Am I missing something here?

Thanks
Sudheer

2

I did some further debugging and it looks like none of my mongo collections are returning any documents at all
Once I execute following
var someCats = Categories.find({"_id" : 1}); var str = JSON.stringify(someCats); console.log(str);

I get following on console
{“collection”:{“name”:“Categories”,"_docs":{"_map":{}},"_observeQueue":{"_tasks":[],"_running":false,"_runTimeout":null},“next_qid”:1,“queries”:{},"_savedOriginals":null,“paused”:false},“sorter”:null,“matcher”:{"_paths":{"_id":true},"_hasGeoQuery":false,"_hasWhere":false,"_isSimple":true,"_selector":{"_id":1}},"_selectorId":1,"_transform":null,“reactive”:true}

any suggestions as to what I am doing wrong?

Thanks
Sudheer

3

Ok I got it… I had auto publish off. I turned it on and everything worked.

Thanks
Sudheer