Accessing meteor collection through template

Question

I'm trying to access the contents of a meteor collection on a template. The first step is a search that allows the app to display specific items from the Mongo collection named players , then when you click on the item it takes you to the showPerson page that displays the contents of those items. So far I have been able to get the search to work, but when you click on a item it renders the new page but does not populate data.

I've tried going through answers on here but have been unable to figure out what I am doing wrong.

Also if you notice in <template name="search"> I have __originalId . I've also tried _id and id but still no success. Speaking of ID's whats the difference between these?

And my extra packages are

easy:search
aldeed:collection2
aldeed:autoform
kadira:flow-router
kadira:blaze-layout
arillo:flow-router-helpers

I also still have autopublish and insecure installed so i guess it's not a subscription issue??

Disclaimer--I'm new to meteor and javascript so please feel free to tear this apart and hold my hand :)

My html is

Search options

<template name="search">
  {{> EasySearch.Input index=playersIndex}}

  <ul>
    {{#EasySearch.Each index=playersIndex}}
      <li>Name of the player: <a href="{{pathFor 'showPerson'}}/{{__originalId}} ">{{name}}</a> {{name}}  Score of the Player:  ({{score}})</li>
    {{/EasySearch.Each}}
  </ul>

  {{> EasySearch.LoadMore index=playersIndex}}

  {{#EasySearch.IfNoResults index=playersIndex}}
    <div class="no-results">No results found!</div>
  {{/EasySearch.IfNoResults}}
</template>

Page that is supposed to display contents

<template name="showPerson">
  <h1>Show Person Details: {{name}}</h1>
  <div class="row">
 name: {{name}}
  </div>
  <div class="row">
    score: {{score}}
  </div>
  <div class="row">
    age: {{age}}
  </div>
</template>

My Javascript is

Tracker.autorun(function () {
  let cursor = PlayersIndex.search('Marie'); // search all docs that contain "Marie" in the name or score field

  console.log(cursor.fetch()); // log found documents with default search limit
  console.log(cursor.count()); // log count of all found documents
});


Template.search.helpers({
  playersIndex: () => PlayersIndex // instanceof EasySearch.Index  
  });


Template.update.helpers({
    exampleDoc: function () {
        return Players.findOne();
  }
});



Template.myMenu.helpers({
  items: function(){
    return MyCollection.find();
  }
});


Template.myMenu.events({
  'onChange #mySelect': function(ev){
    ...handle the event.
  }
});

And my routes

FlowRouter.route('/', {

   action: function() {
    BlazeLayout.render("home");
   }
});



FlowRouter.route( '/players/:_id', {
  name: "showPerson",
  action: function( params ) {
    console.log( params._id );

    BlazeLayout.render( 'showPerson'); 
  }
});

FlowRouter.route('/hello', {
   action: function() {
    BlazeLayout.render('hello');
   }
});

And if it helps here is two screenshots

Home page with search

showPerson page

Database and schema

Players = new Mongo.Collection('players');

 PlayersSchema = new SimpleSchema({
    "name": {
    type: String,
    label: "Business Name"
  },
  "address": {
    type: String,
    label: "Address"
  },
  "website": {
    type: String,
    label: "Website",
    optional: true
  },
}
Players.attachSchema( PlayersSchema );



PlayersIndex = new EasySearch.Index({
  collection: Players,
  fields: ['name', 'score'],
  engine: new EasySearch.MongoDB ()
});

Answer 1

Your showPerson template does not show any data because you don't give any data to it. You should fetch the player data from the collection that match the id given in the route /players/:_id

Go read https://guide.meteor.com to get more info.

Answer 2

First wrap your showPerson template with a {{#with}}

<template name="showPerson">
{{#with person}}
  <h1>Show Person Details: {{name}}</h1>
  <div class="row">
    name: {{name}}
  </div>
  //etc...
{{/with}}
</template>

Then add a helper to provide the data for the {{#with}} :

Template.showPerson.helpers({
  person() {
    return Players.findOne(FlowRouter.getParam('_id'));
  }
});