I’m making an application, and I feel like it’s pretty simple. I have a few templates but nothing with super deep nesting…(3 levels infact).
I’ll post my tree here, and then the code for the templates that seem to be throwing this error. Any help is appreciated.
Tree of Client folder:
/
├── Accounts
│ ├── Login
│ │ ├── login.html
│ │ ├── login.js
│ │ ├── reg.html
│ │ └── reg.js
│ └── UserMgmt
│ ├── userMgmt.html
│ └── userMgmt.js
├── AdminMgmt
│ ├── CategoryMgMt
│ │ ├── catMgmtForm.html
│ │ ├── catMgmtForm.js
│ │ ├── catMgmt.html
│ │ ├── catMgmt.js
│ │ ├── catMgmtTbl.html
│ │ └── catMgmtTbl.js
│ ├── LocationMgmt
│ ├── MgmtPage
│ │ ├── mgmtPage.html
│ │ └── mgmtPage.js
│ ├── ProductMgmt
│ │ ├── prodMgmtForm.html
│ │ ├── prodMgmtForm.js
│ │ ├── prodMgmt.html
│ │ ├── prodMgmt.js
│ │ ├── prodMgmtTbl.html
│ │ └── prodMgmtTbl.js
│ └── StoreMgMt
│ ├── storeMgmtForm.html
│ ├── storeMgmtForm.js
│ ├── storeMgmt.html
│ ├── storeMgmt.js
│ ├── storeMgmtTbl.html
│ └── storeMgmtTbl.js
├── Dashboard
│ ├── dashboard.html
│ └── dashboard.js
├── General
│ ├── headerBar.css
│ ├── headerBar.html
│ ├── headerBar.js
│ ├── Home
│ │ ├── home.html
│ │ └── home.js
│ ├── modal
│ │ ├── modal.css
│ │ ├── modal.html
│ │ └── modal.js
│ └── snackbar
│ ├── snackbar.css
│ ├── snackbar.html
│ └── snackbar.js
├── lib
│ └── assets
│ ├── materialize.css
│ └── materialize.js
├── main.css
├── main.html
├── main.js
├── MainLayout.html
└── MainLayout.js
Getting the error for the Categories templates. I have Products and Stores set the same way, but those both work fine.
CategoryMgMt / catMgmt.html
<template name="catMgmt">
{{> catMgmtForm}}
<hr>
{{> catMgmtTbl}}
</template>
CategoryMgMt / catMgmt.js
Template.catMgmt.onCreated(function() {
});
Template.catMgmt.onRendered(function() {
});
Template.catMgmt.helpers({
});
Template.catMgmt.events({
});
CategoryMgMt / catMgmtForm.html
<template name="catMgmtForm">
<h4>Category Management</h4>
<div class="row">
<div class="col s12 m6 l6 input-field">
<input type="text" class="catNameInp" id="catNameInp" style="{{#if $eq catNameErr true}}border: 2px solid red;{{/if}}" />
<label for="catNameInp">Name*</label>
</div>
</div>
<div class="row">
<div class="col s6 m6 l6">
<a class="waves-effect waves-light btn cancelCatMgmt orange">Cancel</a>
</div>
<div class="col s6 m6 l6">
<a class="waves-effect waves-light btn saveCatMgmt green right">Add</a>
</div>
</div>
</template>
CategoryMgMt / catMgmtForm.js
import { Categories } from '../../../imports/api/category.js';
Template.catMgmtForm.onCreated(function() {
this.subscribe("myCategories");
});
Template.catMgmtForm.onRendered(function() {
});
Template.catMgmtForm.helpers({
catNameErr: function() {
return Session.get("catNameMiss");
}
});
Template.catMgmtForm.events({
'click .saveCatMgmt' (event) {
event.preventDefault();
let catName = $("#catNameInp").val();
if (catName == null || catName == "") {
Session.set("catNameMiss", true);
return;
} else {
Meteor.call('add.category', catNameInp, function(err, result) {
if (err) {
// console.log(" ERROR: Can't add category: " + err);
} else {
// console.log(" SUCCESS adding category.");
$("#catNameInp").val("");
}
});
}
},
'click .cancelCatMgmt' (event) {
event.preventDefault();
$("#catNameInp").val("");
}
});
CategoryMgMt / catMgmtTbl.html
<template name="catMgmtTbl">
<table class="highlight striped responsive-table">
<thead>
<tr>
<th>Name</th>
<th>Owner</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{{#each cats}}
<tr>
<td>{{categoryName}}</td>
<td>{{categoryOwner}}</td>
<td>
<i class="material-icons clickable deleteCategory">delete</i>
<i class="material-icons clickable editCategory">edit</i>
</td>
</tr>
{{/each}}
</tbody>
</table>
</template>
CategoryMgMt / catMgmtTbl.js
import { Categories } from '../../../imports/api/category.js';
Template.catMgmtTbl.onCreated(function() {
this.subscribe("myCategories");
});
Template.catMgmtTbl.onRendered(function() {
});
Template.catMgmtTbl.helpers({
cats: function() {
return Categories.find({});
}
});
Template.catMgmtTbl.events({
});
And my Method file is in
imports/api/category.js
import { Meteor } from 'meteor/meteor';
import { Mongo } from 'meteor/mongo';
import { check } from 'meteor/check';
export const Categories = new Mongo.Collection('categories');
Categories.allow({
insert: function(userId, doc){
// if use id exists, allow insert
return !!userId;
},
});
Meteor.methods({
'add.category' (categoryName) {
check(categoryName, String);
if (!this.userId) {
throw new Meteor.Error('You are not allowed to add categories. Make sure you are logged in with valid user credentials.');
}
console.log(" ---- Made it to the add category method on server.")
return Categories.insert({
categoryName: categoryName,
categoryOwner: this.userId,
});
},
'edit.category' (categoryId, categoryName,) {
check(categoryId, String);
check(categoryName, String);
if (!this.userId) {
throw new Meteor.Error('You are not allowed to edit categories. Make sure you are logged in with valid user credentials.');
}
return Categories.update({ _id: categoryId }, {
$set: {
categoryName: categoryName,
}
});
},
'delete.category' (categoryId) {
check(categoryId, String);
if (!this.userId) {
throw new Meteor.Error('You are not allowed to delete categories. Make sure you are logged in with valid user credentials.');
}
let categoryInfo = Categories.findOne({ _id: categoryId });
let myId = this.userId;
if (myId == categoryInfo.owner) {
return Categories.remove({ _id: categoryId });
} else {
console.log("User not allowed to delete this Category. Not the owner!");
return("Not Allowed!");
}
},
});
I’m just not sure what would be causing this to happen. I essentially enter a category name in the form, and click ‘Add’, and then this console stuff shows up in the browsers.
Uncaught RangeError: Maximum call stack size exceeded
at isObject (utils.js:3:26)
at EJSON.clone (ejson.js:559:8)
at ejson.js:606:22
at Array.forEach (<anonymous>)
at EJSON.clone (ejson.js:605:13)
at ejson.js:606:22
at Array.forEach (<anonymous>)
at EJSON.clone (ejson.js:605:13)
at ejson.js:606:22
at Array.forEach (<anonymous>)
Also, here is my Publish function for Products, which work, and Categories that don’t.
Meteor.publish("myProducts", function() {
try {
return Products.find({ prodOwner: this.userId });
} catch (error) {
console.log(" ERROR pulling product data: " + error);
}
});
Meteor.publish("myCategories", function() {
try {
return Categories.find({ categoryOwner: this.userId });
} catch (error) {
console.log(" ERROR pulling category data: " + error);
}
});
Any help is greatly appreciated.