Displaying combined user data in Meteor

fireflypie · May 11, 2017, 2:00pm

Hello,
I’m trying to achieve the following:

Right now it’s static

 <table class="table table-condensed">
 <thead> 
 <tr> <td> User </td> 
 <td> Jan </td>
 <td> February </td>
 <td> March </td>
 <td> April </td>
 <td> May </td>
 <td> June </td>
 <td> July </td>
 <td> August </td>
 <td> September </td>
 <td> October </td>
 <td> November </td>
 <td> December </td> </tr>
 </thead>

 <tbody>

 <tr>  <td> Igor L </td> <td> 100 </td> <td> 200 </td> <td> 200 </td> <td> 200 </td> <td> 200 </td> <td> 200 </td> <td> 200 </td> <td> 200 </td> <td> 200 </td> <td> 200 </td> <td> 0 </td> <td> 0 </td> </tr>
 <tr>  <td> Aleksei D </td> <td> 100 </td> <td> 200 </td> <td> 200 </td> <td> 200 </td> <td> 200 </td> <td> 200 </td> <td> 200 </td> <td> 200 </td> <td> 200 </td> <td> 0 </td> <td> 0 </td> <td> 0 </td> </tr>
 </tbody>

 </table>

Here’s my helper for this template and the function I’ve made:
(Because I need to use a helper for this, like {{#each earningHistory}} <td>{{monthIndex}}</td> <td> {{currentUser}} ETC ETC {{/each

Template.managerStats.helpers({
	currentYear: function(){
var currentTime = new Date();
var currentYear = currentTime.getFullYear();
return currentYear;

},

earningHistory: function(){
	var yearSelected = yearFilterEarning.get();
	const userQuery = Meteor.users.find().fetch();
	let result;
    const resultQuery = userQuery.map(function(o){
    let currentId = o._id; //ID, eg. bWtb27bRgcqwHJS7s
    let currentUser = o.profile.name_first+" "+o.profile.name_last; //Aleksei D
    let currentUserRole = o.roles[0]; //TODO: we don't want admins in this list 
    let sum = 0; //

	for(let monthIndex = 0; monthIndex < 11; ++monthIndex){
    let tripCost = Trips.find({'userId' : {$eq: currentId}}, {'month' : {$eq: monthIndex}}, {'year' : {$eq:yearSelected}}).fetch().map(function(x){
    sum = sum + Number(x.cost);
    });
    let overCost = Overtime.find({'userId' : {$eq: currentId}}, {'month' : {$eq: monthIndex}}, {'year' : {$eq:yearSelected}}).fetch().map(function(x){
    sum = sum + Number(x.cost);
    });

    //HOW DO I DISPLAY the User, His sum and the month index???
    result = sum+currentUser+monthIndex;
	}
    //HOW DO I DISPLAY the User, His sum and the month index???
    return result;
	}

});

I don’t understand how can I display this data… Help please!

fireflypie · May 12, 2017, 6:34am

Okay with this I do get the output in the console, but how do I parse it into my HTML using {{#EACH?}}

Code

earningHistory: function(){
const userQuery = Meteor.users.find().fetch();
let result = [];
const query = userQuery.map(function(o){
let currentUser = o.profile.name_first+" "+o.profile.name_last; //Aleksei D
for(let monthIndex = 0; monthIndex < 12; ++monthIndex){
var sum = 0;
const uFilterExpr = {"userId" : {$eq: o._id}};
const moFilterExpr = {"month": {$eq: monthIndex.toString()}};
const yeFilterExpr = {"year": {$eq: "2017"}};
const allExpr = Object.assign({}, uFilterExpr, moFilterExpr, yeFilterExpr); 

let tripIds = Trips.find(allExpr).fetch().map(function(x){
sum = sum + Number(x.cost);
});

let overs = Overtime.find(allExpr).fetch().map(function(x){
sum = sum + Number(x.cost);
});
result.push(currentUser, monthIndex, sum);
}



});

console.log(result);

}

console results example:

"Test User" //user
4 //mo 
3.6500000000000004 //amount
"Test User"  //user
5  //mo 
116.11  //amount
"Test User"  //user
6  //mo 
0  //amount

herteby · May 12, 2017, 7:25am

Here, try this example i wrote

##HTML

<template name="userList">
	{{#each users}}
		<ul>
			{{#each info}}
				<li>
					<b>{{key}}:</b> {{value}}
				</li>
			{{/each}}
		</ul>
		<hr>
	{{/each}}
</template>

##JS

Template.userList.helpers({
	users(){
		return Meteor.users.find();
	},
	info(){
		return _.map(this,(value,key)=>{
			return {value, key};
		});
	}
})

fireflypie · May 12, 2017, 7:53am

Hmm, I dont quite understand how do I get my table out of it tho.

This test code gives me empty table


users(){
const userQuery = Meteor.users.find().fetch();
const query = userQuery.map(function(o){
return o._id;
});

},
	

workerNames: function(userId){
const userQuery = Meteor.users.find().fetch();
const query = userQuery.map(function(o){
if(userId == o._id)
return o.profile.name_first+" "+o.profile.name_last;

});
},

  {{#each users}}
    <ul>
      {{#each workerNames}}
        <li>
          <b>{{key}}:</b> {{value}}
        </li>
      {{/each}}
    </ul>
    <hr>
  {{/each}}

herteby · May 12, 2017, 8:05am

You are doing some very weird things! Even if your code worked, if you had 100 users, it would have to loop through the user list 10.000 times

I suggest going through a complete tutorial / course on Meteor and following their examples, before trying to figure things out on your own.

fireflypie · May 12, 2017, 8:12am

I get what you mean, I do see the huge loop within a loop now, and I guess I do need to go over basics first but I just need this thing done in order to finish this meteor app. I’ll figure it out, I have a few ideas on how to make it work, regardless thank you very much

herteby · May 12, 2017, 8:23am

Hehe okay, try this:
##HTML

<template name="userList">
	{{#each users}}
		{{profile.name_first}} {{profile.name_last}}
		<hr>
	{{/each}}
</template>

##JS

Template.userList.helpers({
	users(){
		return Meteor.users.find();
	}
})

fireflypie · May 12, 2017, 9:49am

Thanks, I do get the names but I need to somehow tie these names or ids, and also get results for these people in numbers, 12 times for 12 months.

for(let monthIndex = 0; monthIndex < 12; ++monthIndex){
var sum = 0;
const uFilterExpr = {"userId" : {$eq: o._id}};
const moFilterExpr = {"month": {$eq: monthIndex.toString()}};
const yeFilterExpr = {"year": {$eq: "2017"}};
const allExpr = Object.assign({}, uFilterExpr, moFilterExpr, yeFilterExpr); 

let tripIds = Trips.find(allExpr).fetch().map(function(x){
sum = sum + Number(x.cost);
});

let overs = Overtime.find(allExpr).fetch().map(function(x){
sum = sum + Number(x.cost);
});
result.push(currentUser, monthIndex, sum);
}

I think that I’ll create a function that will pass the ._id variable onto the query and will return the data accordingly.

fireflypie · May 12, 2017, 10:40am

Got it working, woop. Thanks man!
My JS

users(){
return Meteor.users.find();
},


getEarning: function(userId, monthIndex){
var sum = 0;
const uFilterExpr = {"userId" : {$eq: userId}};
const moFilterExpr = {"month": {$eq: monthIndex.toString()}};
const yeFilterExpr = {"year": {$eq: "2017"}};
const allExpr = Object.assign({}, uFilterExpr, moFilterExpr, yeFilterExpr); 

let tripIds = Trips.find(allExpr).fetch().map(function(x){
sum = sum + Number(x.cost);
});

let overs = Overtime.find(allExpr).fetch().map(function(x){
sum = sum + Number(x.cost);
});

if(sum == 0)
return "-"
else
return sum.toFixed(1);

},

HTML

 <table class="table table-condensed">
 <thead> 
 <tr> <td> User </td> 
 <td> January </td>
 <td> February </td>
 <td> March </td>
 <td> April </td>
 <td> May </td>
 <td> June </td>
 <td> July </td>
 <td> August </td>
 <td> September </td>
 <td> October </td>
 <td> November </td>
 <td> December </td> </tr>
 </thead>

 <tbody>
  {{#each users}}
  <tr> 
  <td>  {{profile.name_first}} {{profile.name_last}} </td>
  <td>  {{getEarning _id 0}} </td>
  <td>  {{getEarning _id 1}} </td>
  <td>  {{getEarning _id 2}} </td>
  <td>  {{getEarning _id 3}} </td>
  <td>  {{getEarning _id 4}} </td>
  <td>  {{getEarning _id 5}} </td>
  <td>  {{getEarning _id 6}} </td>
  <td>  {{getEarning _id 7}} </td>
  <td>  {{getEarning _id 8}} </td>
  <td>  {{getEarning _id 9}} </td>
  <td>  {{getEarning _id 10}} </td>
  <td>  {{getEarning _id 11}} </td>
  </tr>
  {{/each}}
   
 </tbody>

 </table>