html - Populating a table in meteor with items from collection

Question

I already have some html code for an expandable/collapsible table that I am trying to put into a meteor application. code here

My main problem that I am having is that when I am populating the table in the meteor application, it is not creating a new expandable row for each new item in my collection (like the example above). Currently it is only populating one row with all the data from within the collection. (as seen in the picture below)

Here is my meteor code:

<template name="adminPage">
<div class="container">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading">Students Waiting</div>
                <div class="panel-body">
                    <table class="table table-condensed table-striped" id="outer-table">
                        <thead id="top-heading">
                            <tr>
                                <th></th>
                                <th >Name</th>
                                <th >Phone Number</th>
                                <th >VIP ID/USC ID</th>
                                <th >Current Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr data-toggle="collapse" data-target="#demo1" class="accordion-toggle">
                                <td>
                                    {{> expandButton}}
                                </td>
                                <td>
                                    {{> listName}}
                                </td>
                                <td>
                                    {{> listNumber}}
                                </td>
                                <td>
                                    {{> listVIP}}
                                </td>
                                <td> waiting</td>
                            </tr>
                            <tr>
                                <td colspan="12" class="hiddenRow">
                                    <div class="accordian-body collapse" id="demo1">
                                        <table class="table table-striped">
                                            <thead id="innter-table">
                                                <tr class="info">
                                                    <th id="inner-heading">Reason for Visit</th>
                                                    <th id="inner-heading">Current Major</th>
                                                    <th id="inner-heading">Intended Major</th>
                                                    <th id="inner-heading">Comments</th>
                                                    <th id="inner-heading"></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>
                                                        {{> listReason}}
                                                    </td>
                                                    <td>
                                                        {{> listCurrent}}
                                                    </td>
                                                    <td>
                                                        {{> listIntended}}
                                                    </td>
                                                    <td>
                                                        {{> listComments}}
                                                    </td>
                                                    <td>
                                                        {{> listDisclaimer}}
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
        </div>
    </div>
</div>

<template name="expandButton">
        <button class="btn btn-default btn-xs btn-circle">
            <span id="plus" class="glyphicon glyphicon-plus"></span>
        </button>

<template name="listName">
{{#each student_name}}
    {{Name}}
    <br>
{{/each}}

<template name="listNumber">
{{#each student_number}}
    {{PhoneNumber}}
    <br>
{{/each}}

<template name="listVIP">
{{#each student_ID}}
    {{VipID}}
    <br>
{{/each}}

<template name="listReason">
{{#each student_Reason}}
   {{ReasonForVisit}}
    <br>
{{/each}}

<template name="listCurrent">
{{#each student_Current}}
    {{CurrentMajor}}
    <br>
{{/each}}

<template name="listIntended">
{{#each student_Intended}}
    {{IntendedMajor}}
    <br>
{{/each}}

<template name="listComments">
{{#each student_Comments}}
    {{Comments}}
    <br>
{{/each}}

<template name="listDisclaimer">
{{#each student_Disclaimer}}
    <button class="btn btn-default btn-sm" data-toggle="modal" data-target="#myModal" contenteditable="false">
        <span class="glyphicon glyphicon-edit"></span>
    </button>
    <button class="btn btn-default btn-sm">
        <span class="glyphicon glyphicon-trash"></span>
    </button>
    <br>
{{/each}}

So my main question is how do I go about getting the data from each item in the collection to populate in a new row so that each row is expandable with just the information from that one item?

Also how would I go about setting the data-target and id to a unique value for each item in the collection so that the row only expands for it's corresponding data?

For example:

<tr data-toggle="collapse" data-target="#demo1" class="accordian toggle">

and

<div class="accordian-body collapse" id="demo1">

using something like

<tr data-toggle="collapse" data-target="#(persons id number)" class="accordian toggle">

and

<div class="accordian-body collapse" id="(persons id number)">

Thanks!

Answer 1

You haven't structured your blaze in the right way. What you need to be doing is repeating each row of the table, with the appropriate data in it. Instead what you are doing is repeating each key within the table (which is only printing once).

It looks like you have made a lot of different helpers (student_name, student_number , student_ID, student_Reason, etc.) that each return a different set of student data?

What you want to do is create a single helper that returns the entire student object, then you can access the data within that object in the correct places. An example would be

<tbody>
    {{#each student in students}}
        <tr data-target="{{student._id}}">
            <td>
                {{student.name}}
            </td>
            <td>
                {{student.reason}}
            </td>
            <td>
                {{student.number}}
            </td>
            <td>
                {{student.current}}
            </td>
        </tr>
    {{/each}}
</tbody>

The code above is repeating the entire table row (<tr>) for each student object in the array of students that the helper is returning. You are then able to access any part of the student object by using dot notation. Using the structure above you should be able to solve the second half of your problem too.