Exception in template helper: Cannot read property 'name' of undefined - meteor

I have been struggling with getting a userprofile to display for a specific user for some time now and I have been reasonably successful. I have ht oe problem where I get the error in the heading.
I publish a schools collection like this
Meteor.publish("schoolData", function () {
return Schools.find();
});
My subscription looks like this
Meteor.subscribe('schoolData');
My HTML looks like this
<template name="userProfile">
<title>My Profile</title>
<table>
<tr>
<td>User Name: </td>
<td>{{userName}}</td>
</tr>
<tr>
<td>First Name: </td>
<td>{{firstName}}</td>
</tr>
<tr>
<td>Last Name: </td>
<td>{{lastName}}</td>
</tr>
<tr>
<td>Registered E-mail: </td>
<td>{{email}}</td>
</tr>
<tr>
<td>Contact E-mail: </td>
<td>{{email}}</td>
</tr>
<tr>
<td>Phone Number: </td>
<td>{{phoneNumber}}</td>
</tr>
<tr>
<td>School: </td>
<td>{{schoolName}}</td>
</tr>
<tr>
<td>First year: </td>
<td>{{firstSchoolYear}}</td>
</tr>
<tr>
<td>Last year: </td>
<td>{{lastSchoolYear}}</td>
</tr>
<tr>
<td>Matriculated? </td>
<td>{{matriculated}}</td>
</tr>
<tr>
<td>House Name: </td>
<td>{{houseName}}</td>
</tr>
<tr>
<td>Country living in: </td>
<td>{{country}}</td>
</tr>
<tr>
<td>City living in: </td>
<td>{{cityOfResidence}}</td>
</tr>
<tr>
<td>Industry employed in: </td>
<td>{{emplIndustry}}</td>
</tr>
</table>
</template>
and the javascript looks like this
Template.userProfile.helpers({
email: function() {return Meteor.user().emails[0].address},
userName: function () {return Meteor.user().username},
firstName: function () {return Meteor.user().profile.firstname},
lastName: function () {return Meteor.user().profile.lastname},
phoneNumber: function () {return Meteor.user().profile.phone},
schoolName: function () {return Schools.findOne(Meteor.user().profile.schoolName).name;},
firstSchoolYear: function () {return Meteor.user().profile.firstschoolyear},
lastSchoolYear: function () {return Meteor.user().profile.lastschoolyear},
matriculated: function () {return Meteor.user().profile.matriculated},
houseName: function () {return Meteor.user().profile.housename},
country: function () {return Meteor.user().profile.country},
cityOfResidence: function () {return Meteor.user().profile.cityofresidence},
emplIndustry: function () {return Meteor.user().profile.emplindustry},
signedUp: function () {return Meteor.user().profile.createdAt},
});
I seem to get the Error
Exception in template helper: TypeError: Cannot read property 'name' of undefined
and it mees this is from the Schools collection.
Can someone help me spot my mistake please.

First of all, there is better way to do what you want to achieve- wrap all your html with {{#with user}} tags like this:
<template name="userProfile">
{{#with user}}
<title>My Profile</title>
<table>
<tr>
<td>User Name: </td>
<td>{{userName}}</td>
</tr>
<tr>
<td>First Name: </td>
<td>{{firstName}}</td>
</tr>
<tr>
<td>Last Name: </td>
<td>{{lastName}}</td>
</tr>
<tr>
<td>Registered E-mail: </td>
<td>{{email}}</td>
</tr>
<tr>
<td>Contact E-mail: </td>
<td>{{email}}</td>
</tr>
<tr>
<td>Phone Number: </td>
<td>{{phoneNumber}}</td>
</tr>
<tr>
<td>School: </td>
<td>{{schoolName}}</td>
</tr>
<tr>
<td>First year: </td>
<td>{{firstSchoolYear}}</td>
</tr>
<tr>
<td>Last year: </td>
<td>{{lastSchoolYear}}</td>
</tr>
<tr>
<td>Matriculated? </td>
<td>{{matriculated}}</td>
</tr>
<tr>
<td>House Name: </td>
<td>{{houseName}}</td>
</tr>
<tr>
<td>Country living in: </td>
<td>{{country}}</td>
</tr>
<tr>
<td>City living in: </td>
<td>{{cityOfResidence}}</td>
</tr>
<tr>
<td>Industry employed in: </td>
<td>{{emplIndustry}}</td>
</tr>
</table>
{{/with}}
</template>
And helper like:
user: function(){return Meteor.users.findOne({_id:Meteor.userId()});
Now you can use all data from your user collection in html without helpers
And to your question - you made your query wrong, it should look like this:
schoolName: function () {
return Schools.findOne({name:Meteor.user().profile.schoolName}).name;
},
I assumed you want to check school by name, if you have _id of it in profile.schoolName change name with _id

Related

Print the table based on the selected option of a radio element

I have a radio element with three options (Normal, Time Sensitive, and Hold For Pick-Up). Every time an user clicks an option, an unique table element for the option (for user to fill information) will pop up automatically. Finally, I would like to print all the submitted data to PDF attachment.
As I write the twig code for it, I am stuck in the part where I want to print the table that belongs to the selected option
{# choose_your_shipping_option: radio's key #}
{# Normal: option text #}
{% if webform_token('[webform_submission:values:choose_your_shipping_option]') == "Normal" %}
<table>
<tr>
<th>Shipping Address:</th>
<th>Acct #</th>
</tr>
<tr>
<td rowspan="3">[webform_submission:values:shipping_address]</td>
<td>[webform_submission:values:id_num]</td>
</tr>
<tr>
<th>Phone</th>
</tr>
<tr>
<td>
[webform_submission:values:phone]
</td>
</tr>
</table>
{% elseif webform_token('[webform_submission:values:choose_your_shipping_option]') == "Time Sensitive" %}
<table>
<tr>
<th>Delivery Date</th>
<td>[webform_submission:values:time_sensitive_01_delivery_date]</td>
<th>Must Have Street Address (No PO Box)</th>
</tr>
<tr>
<th colspan="2">Shipping Address:</th>
<th>Acct #</th>
</tr>
<tr>
<td colspan="2" rowspan="3" style="text-align: center;">[webform_submission:values:shipping_address_2]</td>
<td>[webform_submission:values:id_num]</td>
</tr>
<tr>
<th>Phone</th>
</tr>
<tr>
<td>
[webform_submission:values:phone_2]
</td>
</tr>
</table>
{% elseif webform_token('[webform_submission:values:choose_your_shipping_option]') == "Hold For Pick-Up" %}
<table>
<tr>
<th>Will be picked up by</th>
<th>Pick-up Date:</th>
</tr>
<tr>
<td>[webform_submission:values:pick_up_01_picked_up_by]</td>
<td>[webform_submission:values:pick_up_01_pick_up_date]</td>
</tr>
<tr>
<th>Pick-up Location</th>
<th>Pick-up Time</th>
</tr>
<tr>
<td>[webform_submission:values:location]</td>
<td>[webform_submission:values:time]</td>
</tr>
</table>
{% endif %}
It would ruin the pdf template when I use webform_token. Is there a correct way to print only the one that's filled by the user?

Positioning image in github markdown table

I have some content which does not take up the entire column. so I was trying to postion an image to that side so that it saves some space.
I tried checking for grid layouts or column layout in md but none of it has provided info on how to do it
This is what i am looking for
the code is # here
... thanks
The Markdown table does not support cell merge by default, so you should use HTML table.
And in comment, you said
"Even this time the image took only one row, ..."
in this case just use rowspan.
<table>
<tr>
<td>- Identifying cutomer needs (requirments)</td>
<td rowspan="11">
<img src="https://user-images.githubusercontent.com/74305823/118094261-783e8280-b409-11eb-8f50-8ed0b304fef0.png" width="300"/>
</td>
</tr>
<tr>
<td>- market analysis (requirements)</td>
</tr>
<tr>
<td>- defining goals (requirements)</td>
</tr>
<tr>
<td>- Establishing functions (Prodct concept)</td>
</tr>
<tr>
<td>- Task Specifications (Prodct concept)</td>
</tr>
<tr>
<td>- Conceptualizatoin (Solution concept)</td>
</tr>
<tr>
<td>- Evaluating Alternatives</td>
</tr>
<tr>
<td>- Emnodiment Design</td>
</tr>
<tr>
<td>- Analysis and Optimization</td>
</tr>
<tr>
<td>- Experiment</td>
</tr>
<tr>
<td>- Marketing</td>
</tr>
</table>
EDIT
AS #tarleb said, using <ul>...</ul> tag can be more simple.
<table>
<tr>
<td>
<ul>
<li>Identifying cutomer needs (requirments)</li>
<li>market analysis (requirements)</li>
<li>defining goals (requirements)</li>
<li>Establishing functions (Prodct concept)</li>
<li>Task Specifications (Prodct concept)</li>
<li>Conceptualizatoin (Solution concept)</li>
<li>Evaluating Alternatives</li>
<li>Emnodiment Design</li>
<li>Analysis and Optimization</li>
<li>Experiment</li>
<li>Marketing</li>
</ul>
</td>
<td>
<img src="https://user-images.githubusercontent.com/74305823/118094261-783e8280-b409-11eb-8f50-8ed0b304fef0.png" width="300"/>
</td>
</tr>
</table>

#each helper to populate a table

I'm fairly new to meteor and I'm trying to iterate over a cursor using #each to populate a table. Here's my code:
<template name="choral">
<div class="container" style="padding-top: 25px">
<div class="table-responsive">
<form id="orderForm">
<table class="table table-borderless table-dark">
<thead class="thead-light">
<tr>
<th>Title:</th>
<th>See the Music:</th>
<th>Hear the Music:</th>
<th>Format:</th>
<th>Price (per copy):</th>
<th>Quantity:</th>
</tr>
</thead>
<tbody>
{{#each piece in pieces}}
<tr>
<td id="name">{{piece.name}}</td>
<td id="pdf">PDF</td>
<td id="audio">AUDIO</td>
<td id="format">FORMAT</td>
<td id="price">{{piece.score}}</td>
<td id="qty"><input type ="number" name ="quantity" min="5"></td>
</tr>
{{/each}}
</tbody>
<tfoot>
<tr>
<td colspan="5"></td>
<td><button class="button" type ="submit">Add to Cart</button></td>
</tr>
</tfoot>
</table>
</form>
</div>
</div>
my js.
Template.choral.helpers({
pieces: function(){
return choralm.find({});
}
});
I'm outputting a blank row between the #each tag. I publish the collection server side and subscribe. I'm just not sure where to look. Any ideas?
My publishment and subscription:
Meteor.publish('choralList', function() {
return choralm.find();
});
Template.choral.onCreated( function(){
Meteor.subscribe('choralList');
});
As far as I can see you are subscribing to your data but you are not "telling" your template, that the subscription is finished and it should redraw.
Therefore your template immediately renders while the subscription is ongoing and thus uses the yet empty collection data.
In order to inform your template that data has been updated you can use it's internal Tracker and store the information in a reactive data-source (for my example I use ReactiveDict instead of ReactiveVar).
import { ReactiveDict } from 'meteor/reactive-dict';
Template.choral.onCreated( function (){
// inside onCreated, this refers to the
// current template instance
const instance = this;
// let's attach a ReactiveDict to the instance
instance.state = new ReactiveDict();
// use the internal Tracker
instance.autorun(() => {
// subscribe and store a flag, once ready
const choralListSub = Meteor.subscribe('choralList');
if (choralListSub.ready()) {
instance.state.set('subscriptionComplete', true);
}
});
});
Next you add a helper, that returns the reactive value for 'subscriptionComplete':
Template.choral.helpers({
pieces(){
return choralm.find({});
},
subscriptionComplete() {
// we use 'state', our ReactiveDict,
// which we added as prop in onCreated
return Template.instance().state.get('subscriptionComplete');
}
});
And finally we let our template draw the data, once our subscription is complete. Until the subscription is complete (note the {{else}} block), we display a message about the loading status:
<template name="choral">
<div class="container" style="padding-top: 25px">
{{#if subscriptionComplete}}
<div class="table-responsive">
<form id="orderForm">
<table class="table table-borderless table-dark">
<thead class="thead-light">
<tr>
<th>Title:</th>
<th>See the Music:</th>
<th>Hear the Music:</th>
<th>Format:</th>
<th>Price (per copy):</th>
<th>Quantity:</th>
</tr>
</thead>
<tbody>
{{#each piece in pieces}}
<tr>
<td id="name">{{piece.name}}</td>
<td id="pdf">PDF</td>
<td id="audio">AUDIO</td>
<td id="format">FORMAT</td>
<td id="price">{{piece.score}}</td>
<td id="qty"><input type ="number" name ="quantity" min="5"></td>
</tr>
{{/each}}
</tbody>
<tfoot>
<tr>
<td colspan="5"></td>
<td><button class="button" type ="submit">Add to Cart</button></td>
</tr>
</tfoot>
</table>
</form>
</div>
{{else}}
<div>Loading template...</div>
{{/if}}
</div>
</template>
Related resources
TemplateInstance.autorun
http://blazejs.org/api/templates.html#Blaze-TemplateInstance-autorun
https://docs.meteor.com/api/tracker.html
Reactive stores
https://guide.meteor.com/data-loading.html#stores
Subscription readyness
https://guide.meteor.com/data-loading.html#readiness
Helpers
http://blazejs.org/guide/spacebars.html#Built-in-Block-Helpers

Splitting table with multiple columns into individual tables

I have a website with lots of tables that have 2-3 columns but I need to convert each column into its own table so they will stack up for the mobile site. I'm looking at a daunting amount of work at the moment.
Is there a way that I can split each column into its own table without doing all of it by hand? I'm working in code but would a WYSIWYG software allow me to do this perhaps? Or some other type of workaround?
<table class="dataTable">
<thead>
<tr>
<th>Hauptwerk</th>
<th>Brustwerk (expressive)</th>
<th>Pedal</th>
</tr>
</thead>
<tbody>
<tr>
<td>Prinzipal 8'</td>
<td>Gedackt 8'</td>
<td>Subbass 16'</td>
</tr>
<tr>
<td>Hohlflöte 8'</td>
<td>Rohrflöte 4'</td>
<td>Prinzipal 8'</td>
</tr>
<tr>
<td>Oktave 4'</td>
<td>Nazat 2-2/3'</td>
<td>Bourdon 8'</td>
</tr>
<tr>
<td>Flöte 2'</td>
<td>Prinzipal 2'</td>
<td>Oktave 4'</td>
</tr>
<tr>
<td>Mixtur IV</td>
<td>Terz 1-3/5'</td>
<td>Fagott 16'</td>
</tr>
<tr>
<td>Trompete 8'</td>
<td>Quinte 1-1/3'</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Scharff III</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td class="italic">Tremulant</td>
<td> </td>
</tr>
</tbody>
</table>
I'm not sure which part of the CSS would be relevant, here is a sample page:
http://letourneauorgans.com/en/opus121.php

How can I select from only one table with Web::Scraper?

I want to extract the text only for heading Node Object Methods from a webpage. The specific HMTL part is as follows:
<h2>Node Object Properties</h2>
<p>The "DOM" column indicates in which DOM Level the property was introduced.</p>
<table class="reference">
<tr>
<th width="23%" align="left">Property</th>
<th width="71%" align="left">Description</th>
<th style="text-align:center;">DOM</th>
</tr>
<tr>
<td>attributes</td>
<td>Returns a collection of a node's attributes</td>
<td style="text-align:center;">1</td>
</tr>
<tr>
<td>baseURI</td>
<td>Returns the absolute base URI of a node</td>
<td style="text-align:center;">3</td>
</tr>
<tr>
<td>childNodes</td>
<td>Returns a NodeList of child nodes for a node</td>
<td style="text-align:center;">1</td>
</tr>
<tr>
<td>firstChild</td>
<td>Returns the first child of a node</td>
<td style="text-align:center;">1</td>
</tr>
<tr>
<td>lastChild</td>
<td>Returns the last child of a node</td>
<td style="text-align:center;">1</td>
</tr>
<tr>
<td>localName</td>
<td>Returns the local part of the name of a node</td>
<td style="text-align:center;">2</td>
</tr>
<tr>
<td>namespaceURI</td>
<td>Returns the namespace URI of a node</td>
<td style="text-align:center;">2</td>
</tr>
<tr>
<td>nextSibling</td>
<td>Returns the next node at the same node tree level</td>
<td style="text-align:center;">1</td>
</tr>
<tr>
<td>nodeName</td>
<td>Returns the name of a node, depending on its type</td>
<td style="text-align:center;">1</td>
</tr>
<tr>
<td>nodeType</td>
<td>Returns the type of a node</td>
<td style="text-align:center;">1</td>
</tr>
<tr>
<td>nodeValue</td>
<td>Sets or returns the value of a node, depending on its
type</td>
<td style="text-align:center;">1</td>
</tr>
<tr>
<td>ownerDocument</td>
<td>Returns the root element (document object) for a node</td>
<td style="text-align:center;">2</td>
</tr>
<tr>
<td>parentNode</td>
<td>Returns the parent node of a node</td>
<td style="text-align:center;">1</td>
</tr>
<tr>
<td>prefix</td>
<td>Sets or returns the namespace prefix of a node</td>
<td style="text-align:center;">2</td>
</tr>
<tr>
<td>previousSibling</td>
<td>Returns the previous node at the same node tree level</td>
<td style="text-align:center;">1</td>
</tr>
<tr>
<td>textContent</td>
<td>Sets or returns the textual content of a node and its
descendants</td>
<td style="text-align:center;">3</td>
</tr>
</table>
<h2>Node Object Methods</h2>
<p>The "DOM" column indicates in which DOM Level the method was introduced.</p>
<table class="reference">
<tr>
<th width="33%" align="left">Method</th>
<th width="61%" align="left">Description</th>
<th style="text-align:center;">DOM</th>
</tr>
<tr>
<td>appendChild()</td>
<td>Adds a new child node, to the specified node, as the last child node</td>
<td style="text-align:center;">1 </td>
</tr>
<tr>
<td>cloneNode()</td>
<td>Clones a node</td>
<td style="text-align:center;">1 </td>
</tr>
<tr>
<td>compareDocumentPosition()</td>
<td>Compares the document position of two nodes</td>
<td style="text-align:center;">1 </td>
</tr>
<tr>
<td>getFeature(<span class="parameter">feature</span>,<span class="parameter">version</span>)</td>
<td>Returns a DOM object which implements the specialized APIs
of the specified feature and version</td>
<td style="text-align:center;">3 </td>
</tr>
<tr>
<td>getUserData(<span class="parameter">key</span>)</td>
<td>Returns the object associated to a key on a this node. The
object must first have been set to this node by calling setUserData with the
same key</td>
<td style="text-align:center;">3 </td>
</tr>
<tr>
<td>hasAttributes()</td>
<td>Returns true if a node has any attributes, otherwise it
returns false</td>
<td style="text-align:center;">2 </td>
</tr>
<tr>
<td>hasChildNodes()</td>
<td>Returns true if a node has any child nodes, otherwise it
returns false</td>
<td style="text-align:center;">1 </td>
</tr>
<tr>
<td>insertBefore()</td>
<td>Inserts a new child node before a specified, existing, child node</td>
<td style="text-align:center;">1 </td>
</tr>
</table>
In Perl if I write the following:
my $data = scraper {
process "table.reference > tr > td > a", 'renners[]' => 'TEXT';
}
for my $i (0 .. $#{$res2->{renners}}) {
print $res2->{renners}[$i];
print "\n";
}
I get the text for all the tags i.e.:
attributes
baseURI
.
.
.
.
insertBefore()
wheras I need the text of tag <a> only for Node Object Methods i.e.:
appendChild()
.
.
.
insertBefore()
In short I want to print the NODE object methods only. What should I modify in the code?
Web::Scraper can use nth_of_type to choose the right table. There are two tables with the same class, so you can say table.reference:nth-of-type(2):
use v5.22;
use feature qw(postderef);
no warnings qw(experimental::postderef);
use Web::Scraper;
my $html = do { local $/; <DATA> };
my $methods = scraper {
process "table.reference:nth-of-type(2) > tr > td > a", 'renners[]' => 'TEXT';
};
my $res = $methods->scrape( $html );
say join "\n", $res->{renners}->#*;
And here's a Mojo::DOM:
use Mojo::DOM;
my $html = do { local $/; <DATA> };
my $dom = Mojo::DOM->new( $html );
say $dom
->find( 'table.reference:nth-of-type(2) > tr > td > a' )
->map( 'text' )
->join( "\n" );
I tried looking for a selector solution that could recognize the text in the h2, but my kung fu is weak here.
Web::Query provides an almost identical solution to the Mojo::DOM solution proposed by brian d foy.
use Web::Query;
my $html = do { local $/; <DATA> };
wq($html)
->find('table.reference:nth-of-type(2) > tr > td > a')
->each(sub {
my ($i, $e) = #_;
say $e->text();
});
However it looks like Mojo::DOM is the more robust library. For Web::Query to correctly match with its selector I had to edit the input provided in the question to add a root node surrounding all the other content.
__DATA__
<html>
...
</html>
You can use XPath to extract data from the very next table after the heading Node Object Methods, like so
use Web::Scraper;
my $html = do { local $/; <DATA> };
my $methods = scraper {
process '//h2[.="Node Object Methods"]/following-sibling::table[1]//tr/td[1]',
'renners[]' => 'TEXT';
};
my $res = $methods->scrape( $html );
say join "\n", #{ $res->{renners} };
The output will be
appendChild()
cloneNode()
compareDocumentPosition()
getFeature(feature,version)
getUserData(key)
hasAttributes()
hasChildNodes()
insertBefore()

Resources