[Solved] Inserting and showing db Data, what am I missing?

Hi,

I’m new to meteor and used PHP for the majority of my time in programming.

I’ve created a --full meteor project, trying to build a simple news-feed feature, where I can write a post, with a title and display it. My form doesn’t seem to insert the data nor is the code working that displays the data of the news-collection. (I inserted a set of data via meteor-mongo). There’s no error showing up.

This is what I have:

imports/api/news/server/publications.js

// All news-related publications

import { Meteor } from 'meteor/meteor';
import { News } from '../news.js';

Meteor.publish('news.all', function () {
  return News.find();
});

imports/api/news/methods.js

// Methods related to news

import { Meteor } from 'meteor/meteor';
import { check } from 'meteor/check';
import { News } from './news.js';

Meteor.methods({
  'news.insert'(content, title) {
    check(content, String);
    check(title, String);

    return News.insert({
      title,
      content,
      createdAt: new Date(),
    });
  },
});

imports/api/news/news.js

// Definition of the news collection

import { Mongo } from 'meteor/mongo';

export const News = new Mongo.Collection('news');

imports/ui/components/apc_news/apc_news.html

<template name="apc_news">

  <section class="news_wrapper"> 


<article>
    <h3>Write Newsfeed</h3>
    <form class='news-link-add'> 
        <input type="text" name="title" placeholder="Title" required>
        <textarea name="content" required>Write your news!</textarea>
        <br>
        <input type="submit" name="submit" value="Add new news">
      </form>
</article>


<article>
    <h3>Latest News</h3>
  <ul>  
    {{#each news}}
    {{content}}
    {{title}}
    {{/each}}
  </ul>
</article>

</section>

</template>

imports/ui/components/apc_news/apc_news.js

import { News } from '/imports/api/news/news.js';
import { Meteor } from 'meteor/meteor';
import './apc_news.html';

Template.apc_news.onCreated(function () {
  Meteor.subscribe('news.all');
});

Template.apc_news.helpers({
  news() {
    return News.find({});
  },
});

Template.apc_news.events({
  'submit .news-link-add'(event) {
    event.preventDefault();

    const target = event.target;
    const title = target.title;
    const content = target.url;

    Meteor.call('news.insert', title.value, content.value, (error) => {
      if (error) {
        alert(error.error);
      } else {
        title.value = '';
        content.value = '';
      }
    });
  },
});

imports/pages/apc/apc.html

<template name="App_apc">
{{> apc_news}}
</template>

imports/pages/apc/apc.js

import './apc.html';
import '../../components/apc_news/apc_news.js';

Are any errors reported in the browser console? Where are your imports/api/news/server/publications.js and imports/api/news/methods.js files imported?

The publications file needs to be imported at least once on the server, and the methods file needs to be imported at least on the server (and optionally on the client if you want optimistic UI).

Put some console.log() calls inside the publication, inside the method, inside the submit event handler and inside the Meteor.call callback and see which bits aren’t happening.

1 Like

I imported the publications into the server and now the strings I inserted via meteor mongo are there, thank you.

I discovered this error-message in the browser console though:

apc_news.js:23 Uncaught TypeError: Cannot read property 'value' of undefined
    at Object.submit .news-link-add (apc_news.js:23)
    at blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:3818
    at Function.Template._withTemplateInstanceFunc (blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:3769)
    at Blaze.View.<anonymous> (blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:3817)
    at blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:2617
    at Object.Blaze._withCurrentView (blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:2271)
    at Blaze._DOMRange.<anonymous> (blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:2616)
    at HTMLFormElement.<anonymous> (blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:863)
    at HTMLDivElement.dispatch (jquery.js?hash=699d1bc3c40269647d37a2122535584956ec67d8:5282)
    at HTMLDivElement.elemData.handle (jquery.js?hash=699d1bc3c40269647d37a2122535584956ec67d8:4934)

It occurs when I click on the submit-button.

In your event handler you need target.elements to access the form elements by name:

    const title = target.elements.title;
    const content = target.elements.content;

Edit: Actually I’m wrong, you don’t need the elements part, you can use target.title without it.

I suspect your previous error was because you had “content = target.url” instead of “target.content

2 Likes

The problem has been completely solved by this. Thank you very much! :hearts:

No problem, glad I could help! Good luck with your Meteor journey…