Amir Rahbaran Amir Rahbaran - 5 years ago 166
Javascript Question

Meteor: show each item from an array from mongo in separate list tag

Note: Whole code can be found here:

https://github.com/Julian-Th/crowducate-platform/tree/feature/courseEditRights

Currently, all items from an array are displayed in one single list instead of a separate list tag:

enter image description here

My JS (I commented out some prior approaches):

Template.modalAddCollaborators.events({
'click #js-addCollaborator' : function (event) {
var collaboratorName = $('#collaboratorName').val(); //
Courses.update(
{ _id: this._id },
{ $addToSet: {canEditCourse: collaboratorName } }
)
$('#collaboratorName').val("");
}
});

Template.modalAddCollaborators.helpers({
'addedCollaborators': function () {
return Courses.find();
//return Courses.find({_id: this._id}, {$in: "canEditCourse"});
//return Courses.distinct("canEditCourse");
}
});


My HTML:



<template name="modalAddCollaborators">
<div id="modalAddCollaborators" class="modal fade" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Manage Your Collaborators</h4>
</div>
<div class="modal-body">
<form class="form" role="form">
<ul class="list-group">
{{#each addedCollaborators}}<li class="list-group-item">{{canEditCourse}}</li>{{/each}}
</ul>
<div class="form-group">
<input type="text" id="collaboratorName" placeholder="add a collaborator ...">
<button type="button" id="js-addCollaborator" class="btn btn-success">Add</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</template>


MY JSON:

{
"_id" : "rmZEFmfoBwf4NwqX4",
"title" : "Love",
"coverImageId" : "P7PyR6x64uCSX7X9m",
"author" : "test",
"keywords" : [
"test"
],
"published" : "true",
"about" : "test",
"canEditCourse" : [
"wicazRk3EsThE5E8W",
"Jolle",
"jolle",
"vW59A6szZijMDLDNh"
],
"createdById" : "wicazRk3EsThE5E8W",
"dateCreated" : ISODate("2015-12-27T15:06:28.272Z")
}


Any help appreciated, thank you.

Answer Source

Courses.find(); returns a cursor and not an array. Use fetch() method instead:

Template.modalAddCollaborators.helpers({
    'addedCollaborators': function () {
        return Courses.find().fetch();        
    }
});

In your template, create nested {{#each}} blocks with the first one iterating over the courses array and the next each block getting the canEditCourse array as the parameter. Inside the block, you can use this to reference the element being iterated over, something like the following for example:

<template name="modalAddCollaborators">
    {{#each addedCollaborators}}
        <h1>{{title}}</h1>
        <ul class="list-group">
        {{#each canEditCourse}}
            <li class="list-group-item">{{this}}</li>
        {{/each}}
        </ul>
    {{/each}}
</template>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download