Stuck doing the task list tutorial: task component shows undefined on page

help
1

Hi,

I’m sure I’m doing something very trivial wrong, but I’m not at all familiar with this stack and from what I can see, things look right.
I am doing the Svelte-based todo list tutorial, having modified it slightly to fit my use case. Right now, that just means “tasks” are called “categories” instead.
At the end of step 2.3, I am meant to see my inserted categories show up on the page. However, I am seeing the correct HTML elements with “undefined” rather than the category text.
I’ve already debugged mongoDB insertion and that all looks like it’s going fine, so somewhere throughout the rendering process I must have made a mistake that I can’t find for the life of me.

I have the following code:

in App.svelte:

<script>
  import { Meteor } from "meteor/meteor";
   import Category from "./Category.svelte";
   import { CategoriesCollection } from "../api/CategoriesCollection"; 
   $m: categories = CategoriesCollection.find({}).fetch()

  // more information about $m at https://atmospherejs.com/zodern/melte#tracker-statements
</script>

//SNIP


      {#each categories as category (category._id)}
          <Category category={category} />
      {/each}

In server/main.js:

import { Meteor } from 'meteor/meteor';
import { CategoriesCollection } from '/imports/api/CategoriesCollection';
const insertCategory = categoryText => {
  console.log(categoryText)
  const id = CategoriesCollection.insert({ categoryText });
  console.log(id);
}


Meteor.startup(async () => {

  if (await CategoriesCollection.find().countAsync() === 0) {
    [
      'First dinner',
      'Second Dinner',
      'third dinner',
      'Fourth dinner',
      'Fifth Dinner',
      'Sixth Dinner',
      'breakfast'
    ].forEach(insertCategory)
  }


});

In imports/api/CategoriesCollection.js:

import { Mongo } from "meteor/mongo";

export const CategoriesCollection = new Mongo.Collection("categories");

And finally in the Category.svelte component:

<script>
   export let category;
   </script>
<h2> { category.text }</h2>
2

You need to set up your publish and subscribe and then I think you should be good to go.

3

Hmm,

not that the tutorial mntions. Might be old, I did notice some mentions for the subscribers in App.svelte which I initially removed as it tells you you don’t need to keep the old code.
I altered it to read as follows:

<script>
  import { Meteor } from "meteor/meteor";
   import Category from "./Category.svelte";
   import { CategoriesCollection } from "../api/CategoriesCollection"; 
   $m: categories = CategoriesCollection.find({}).fetch()
    let subIsReady = false;
  $m: {
    const handle = Meteor.subscribe("categories.all");
    subIsReady = handle.ready();
  }
</script>

So far no luck, I’m assuming I need to subscribe to this somewhere but again, this bit isn’t in the tutorial I’m looking at so guidance very much appreciated :slight_smile:

4

Looks like you need to use category.categoryText in your Category.svelte file. Or you can change how you’re inserting them to use text as the field name rather than categoryText

Putting $: console.log(categories) in your App.svelte and opening up the browser console might be helpful. If you can see the categories there, then the data is making it to the client.

I forgot the tutorial uses the —prototype flag so you don’t have to have publish and subscribe right away (you’ll need them eventually)

1 Like
5

category.categoryText did it, thanks a bunch :slight_smile: