Many tutorials and documentations later, I still cannot display data from Mongo in the Meteor client.
import { Mongo } from 'meteor/mongo';
export const Skills = new Mongo.Collection('skills')
Template.Skills.helpers({
skills: function() {
return Skills.find();
}
});
skills.html
<template name="Skills">
<h2>My Skills</h2><ul>
{{#each skills}}
{{> SkillItem}}
{{/each}}
</ul>
</template>
entering Skills.find(); in the developer console does not really do anything except give me the following error.
Exception in template helper: ReferenceError: Skills is not defined
Related
i already have try to install mongodb via npm but i keep getting error Cannot find module "fs"
and my code is look like this
<script>
const MongoClient = require('mongodb').MongoClient;
export default {
data(){
return{
msg:'this is a test'
}
},
created:function(){
MongoClient.connect('mongodb://127.0.0.1:27017', (err, database) => {
if (err){
console.log('1');
}else{
console.log('2');
}
})
}
}
</script>
<template>
<div>
{{msg}}
</div>
</template>
so how do i import mongodb to my vuejs 2 framework?
VueJS is frontend framework.
You definitely should not try to deal with DB directly from Vue.
You should have backend made with any language/framework you want: NodeJS(if you want to stick with JS), ASP.NET(C#), Spring(Java) etc. and your backend should deal with DB and you should only make AJAX requests to your backend and send/get back JSONs and deal with JSONs on frontend with Vue.
I am struggling to get my project to work with Routing, I imagine that something is really wrong.
currently the exception being logged
Error: There is already a collection named "person"
at new Mongo.Collection (packages/mongo/collection.js:240:15)
at meteorInstall.collections.persons.js (collections/persons.js:2:23)
at fileEvaluate (packages/modules-runtime.js:197:9)
at require (packages/modules-runtime.js:120:16)
at /home/usr/Dev/simple-todos/.meteor/local/build/programs/server/app/app.js:198:1
at /home/usr/Dev/simple-todos/.meteor/local/build/programs/server/boot.js:303:34
at Array.forEach (native)
at Function._.each._.forEach (/home/usr/.meteor/packages/meteor-tool/.1.4.3_2.7s3fq6++os.linux.x86_64+web.browser+web.cordova/mt-os.linux.x86_64/dev_bundle/server-lib/node_modules/underscore/underscore.js:79:11)
at /home/usr/Dev/simple-todos/.meteor/local/build/programs/server/boot.js:128:5
at /home/usr/Dev/simple-todos/.meteor/local/build/programs/server/boot.js:352:5
Exited with code: 1
Your application is crashing. Waiting for file change.
Following are my code:
routes.js (Loaded in the lib folder so that it loads first)
Router.configure({
layoutTemplate: 'layout'
});
Router.route('/', function () {
this.render('personTemplate');
});
Main Layout Template (to be the container for the entire App) + a yield container to direct the routes on the main template.
<template name="layout">
<nav class="deep-orange lighen-4" role="navigation">
<div class="nav-wrapper container left">
<ul class="right">
<li>test</li>
<li>about</li>
{{> loginButtons}}
<!-- <i class="material-icons" style="font-size:30px;color:grey">person</i> -->
</ul>
SiteName
</div>
</nav>
{{> yield}}
</template>
person.js (the collection definition file -- also located in the lib folder to load first)
import {mongo} from 'meteor/mongo';
export const Person = new Mongo.Collection('person');
The personTemplate definition
<template name="personTemplate">
{{#each person}}
{{> todosTest}}
{{/each}}
</template>
<template name="todosTest">
<ul>{{name}}</ul>
</template>
person helpers - which will perform the lookup to the person collection
import { Template } from 'meteor/templating';
import { Person } from '../../lib/collections/persons.js';
import { ReactiveVar } from 'meteor/reactive-var';
import '../templates/personTemplate.html';
Template.personTemplate.helpers({
person(){
var aPerson = Person.find({});
// check for existence before returning
return aPerson && aPerson.name
}
});
lastly my main.js file to load the collection on the server:
import { Meteor } from 'meteor/meteor';
import '../lib/collections/persons.js';
below a graphic to display the folder layout:
You are defining the collections 'Person' twice by having the same file in two different folders.
Good Day,
I'm trying to create a simple search function using the easy search package.
In a nutshell I have done the following-
Defined a schema and index on the client as such:
const Patients = new Mongo.Collection('patients');
const PatientsIndex = new EasySearch.Index({
collection: Patients,
fields: ['name'],
engine: new EasySearch.MongoDB()
});
I've entered the following values into the database:
meteor:PRIMARY> db.patients.find()
{ "_id" : ObjectId("57d6a9f71bad26ba07748f9d"), "name" : "Paul" }
Created a template helper on the client side:
Template.searchBox.helpers({
patientsIndex: () => PatientsIndex
});
And lastly I've created a template which should output the results:
<template name="searchBox">
{{> EasySearch.Input index=patientsIndex }}
<ul>
{{#EasySearch.Each index=patientsIndex }}
<li>Name of the patient: {{name}}</li>
{{/EasySearch.Each}}
</ul>
</template>
Now for some reason this just wont work, it renders nothing to the template, I' very new to this and would really appreciate some assistance.
Thanking you.
From your code samples it looks like you're trying to refer to both Patients and PatientsIndex globally. Assuming you have your Patients and PatientsIndex declarations in a shared client/server location (like /lib), then you should remove the const keyword. That will make sure these declarations are available globally, and will allow your Template to use them. Here's a modified version of your code that will work:
/lib/collection.js
Patients = new Mongo.Collection('patients');
PatientsIndex = new EasySearch.Index({
collection: Patients,
fields: ['name'],
engine: new EasySearch.MongoDB()
});
/client/main.html
<body>
{{> searchBox}}
</body>
<template name="searchBox">
{{> EasySearch.Input index=patientsIndex }}
<ul>
{{#EasySearch.Each index=patientsIndex }}
<li>Name of the patient: {{name}}</li>
{{/EasySearch.Each}}
</ul>
</template>
/client/main.js
import { Template } from 'meteor/templating';
import './main.html';
Template.searchBox.helpers({
patientsIndex() {
return PatientsIndex;
}
});
I'm trying to connect my app with mongodb. Adding a post with static array data works fine.
Problem: Nothing shows now up under {{post}}. If I check my DB, there is already data inserted.
Database Insert + Code:
db.calposts.insert({ post: "Hello world!", createdAt: new Date() });
WriteResult({ "nInserted" : 1 })
{{#each calposts}}
{{> posts}}
{{/each}}
<template name="posts">
<div class="panel-post" id="post-draggable">
<span>{{post}}</span>
</div>
</template>
if (Meteor.isClient) {
Template.calendar.helpers({
calposts: function () {
return CalPosts.find({});
}
});
}
Did you publish calpost collection to the client?
If not, in the server folder somewhere you need to use Meteor.publish() and then on the client side, run Meteor.subscribe() to subscribe to the publication.
Check out this page on meteor.com for more info on publishing and subscribing:
https://www.meteor.com/tutorials/blaze/publish-and-subscribe
Im new to meteor, I have a problem I can't get collection from mongodb (i use iron router )
/client/routes.js
Router.route('/page', function(){
this.render('page');
});
/client/foo.js
city = new Mongo.Collection('data');
if (Meteor.isClient) {
Template.foo.helpers({
data: function(){
return city.find();
}
});
}
client/views/foo.html
<template name="foo">
{{#each data}}
{{> all_data}}
{{/each}}
</template>
<template name="all_data">
<li>{{city}}</li>
</template>
in chrome console the command city.find() give me:
L…n.Cursor {collection: LocalCollection, sorter: null, _selectorId:
undefined, matcher: M…o.Matcher, skip: undefined…}
and in mongo console db.data.find() it work fine
i think there a problem to connect to mongodb
The collections need to be defined on both server and client side for autopublish to work -- files in /client are only executed on the client side, so city = new Mongo.Collection('data'); is unknown to the server.
Move the file
/client/foo.js
into the parent directory
/foo.js
And it will likely work