Group and display data | 易学教程

问题

Here is my data

data = [
  { category : "Cat1"}, 
  { category : "Cat2"}, 
  { category : "Cat3"}, 
  { category : "Cat4"}, 
  { category : "Cat5"}, 
  { category : "Cat6"}]

Let suppose i have it in a collection named myData

What i want is to group and display my data in group of 2. Then i display it in a navbar (in a dropdown in fact) like this

<ul>
{{#each group}}
<li class="col-md-2">
  <ul>
   {{#each categories}}   
   <li>{{category}}</li>
   {{/each}}
  </ul>
{{/each}}
<ul>

What i am asking is how to group the data in my helpers or in mongodb so that i could get this result.

回答1:

You can break it up into groups of 2 inside a helper using underscore's map and compact

Template.hello.helpers({
  groups() {
    // var data = myData.find().fetch();
    var data = [
      { category : "Cat1"},
      { category : "Cat2"},
      { category : "Cat3"},
      { category : "Cat4"},
      { category : "Cat5"},
      { category : "Cat6"}];

      return _.chain(data).map(function(item, index){
        return (index % 2) ? false : data.slice(index, index + 2);
      }).compact().value();
   },
});

Then, in your template you can use a nested #each in to loop through groups

<template name="hello">
  <ul>
    {{#each group in groups}}
      <li class="col-md-2">
        <ul>
          {{#each category in group}}
            <li>{{category.category}}</li>
          {{/each}}
        </ul>
      </li>
     {{/each}}
    </ul>
  </template>

回答2:

I'm not 100% clear what you mean by "group", but assuming you are using Boostrap navbar dropdowns, you could group them with separators:

{{#each categories}}   
   <li>{{category}}</li>
   {{#if doSeparator @index}}
       <li role="separator" class="divider"></li>
   {{/if}
{{/each}}

and the doSeparator helper goes in your .js file:

doSeparator( index ) {
    return (index % 2);
}

If on the other hand you want submenus for each group you will need to reorganize your array in two levels.

回答3:

Another approach could be:

<ul>
  {{#each groups}}
    <li>
      <ul>
       {{#each this}}
         <li>{{category}}</li>
       {{/each}}
      </ul>
    </li>
  {{/each}}
</ul>

Then in your Template helper:

import { Template } from 'meteor/templating';
import chunk from 'lodash/chunk';

import { myData } from '/imports/api/mydata/collection';
import './main.html';

Template.someTemplate.helpers({
  groups() {
    return chunk(myData.find().fetch(), 2);
  },
});

This uses lodash's chunk function to split the returned array into groupings of 2 items (so you'll want to meteor npm install --save lodash if you haven't already).

The above will give you output like:

<ul>    
  <li>
    <ul>     
       <li>1</li>    
       <li>2</li>     
    </ul>
  </li>
  <li>
    <ul>    
       <li>3</li>     
       <li>4</li>     
    </ul>
  </li>
  <li>
    <ul>     
       <li>5</li>     
       <li>6</li>     
    </ul>
  </li>
</ul>

来源：https://stackoverflow.com/questions/38745541/group-and-display-data

标签

mongodb

meteor