Question

我似乎无法弄清楚如何将两个视频项目符号点合并为一个包含两个驱动程序的项目符号点。

收集数据

"drivers":[
    {"title":"Nvidia Video Driver","category":"Video","version":"331.82","description":"Lorem ipsum dolor sit amet","filename":"nvidia.exe"},
    {"title":"Intel Video Driver","category":"Video","version":"10.4.4740","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies.","filename":"intel.exe"},
    {"title":"Realtek Audio","category":"Audio","version":"1.25.21","description":"consectetur adipiscing elit. Suspendisse ultricies.","filename":"audio.exe"},
    {"title":"Storage controller","category":"chipset","version":"23.13.412","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit.","filename":"chip.exe"}
  ]

deviceDetails.helpers

Template.deviceDetails.helpers({
deviceDrivers:function(drivers) {

    var driverArray = drivers.sort(function(a, b) {
        if (a.category.toLowerCase() < b.category.toLowerCase()) return -1;
        if (a.category.toLowerCase() > b.category.toLowerCase()) return 1;
        return 0;
      });

    console.log(driverArray);
    return driverArray;
}
});

DeviceDetails.html

<ul>
    {{#each deviceDrivers device.drivers}}
        <li class="text-capitalize list-unstyled">{{category}}<ul>
          <li><a href="{{filename}}">{{title}} -> {{version}}</a><br>
            {{description}}
          </li></ul>
        </li>
    {{/each}}
</ul>

结果

- Audio
 - Realtek Audio -> 1.25.21
     - Consectetur Adipiscing Elit. Suspendisse Ultricies.
- Chipset
 - Storage Controller -> 23.13.412
     - Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit.
- Video
    - Nvidia Video Driver -> 331.82
      - Lorem Ipsum Dolor Sit Amet
- Video (!REMOVE! line)
    - Intel Video Driver -> 10.4.4740
      - Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit. Suspendisse Ultricies.

期望的结果

- Audio
 - Realtek Audio -> 1.25.21
     - Consectetur Adipiscing Elit. Suspendisse Ultricies.
- Chipset
 - Storage Controller -> 23.13.412
     - Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit.
- Video
    - Nvidia Video Driver -> 331.82
      - Lorem Ipsum Dolor Sit Amet
    - Intel Video Driver -> 10.4.4740
      - Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit. Suspendisse Ultricies.

更新

我能够使用Julien Answer获得所需的结果。

deviceDrivers:function(drivers) {

    var driverArray = drivers.reduce(function(result, driver){
        var category = result.find(function(search){
            return search.category === driver.category;
        });
        if(category){
            category.drivers.push(driver);
        } else {
            result.push({
                category:driver.category,
                drivers: [driver]
            });
        }
            return result
        },[]).sort(function(a, b) {
    if (a.category.toLowerCase() < b.category.toLowerCase()) return -1;
    if (a.category.toLowerCase() > b.category.toLowerCase()) return 1;
    return 0;
  });

    console.log(driverArray);
    return driverArray;
}

更新2

Christian Fritz Answer在编辑完成后效果很好。

deviceDrivers:function(drivers) {
    var test = _.map(
    _.sortBy(
        _.groupBy(drivers, 'category'), function(value, key) {
            return key.toLowerCase();
        }), function(value, key) {
            return {category:value[0].category,drivers: value};
        });
    console.log(test);
    return test;
}

Answer 1

您可以使用Array.prototype.reduce：

    drivers.reduce(function(result, driver){
        var category = result.find(function(search){
            return search.category === driver.category;
        });
        if(category){
            category.drivers.push(driver);
        } else {
            result.push({
                category:driver.category,
                drivers: [driver]
            });
        }
        return result
    },[]);

我从this tutorial series了解到，这个家伙很聪明，非常有趣。

这将为您提供一个类似于：

的数组

[
  {
    "category": "Video",
    "drivers": [
      {
        "title": "Nvidia Video Driver",
        // ...
      },
      {
        "title": "Intel Video Driver",
        // ...          }
    ]
  },
  {
    "category": "Audio",
    "drivers": [
      {
        "title": "Realtek Audio",
        // ...          }
    ]
  },
  {
    "category": "chipset",
    "drivers": [
      {
        "title": "Storage controller",
        // ...
      }
    ]
  }
]

然后在你的模板中，你应该尝试类似的东西：

<ul>
    {{#each deviceDrivers}}
        <li class="text-capitalize list-unstyled">{{category}}
         {{#each deviceDrivers}}
          <ul>
            <li><a href="{{filename}}">{{title}} -> {{version}}</a><br>
              {{description}}
            </li>
          </ul>
         {{/each}}
        </li>
    {{/each}}
</ul>

Answer 2

我建议预先分组：

JS：

Template.deviceDetails.helpers({
    deviceDrivers:function(drivers) {

        var driverGroups = 
            _.map(
                _.sortBy(
                    _.groupBy(drivers, 'category'), function(value, key) {
                        return key.toLower();
                    }), function(value, key) {
                        return {key: key, value: value};
                    });

        console.log(driverGroups);
        return driverGroups;
    }
});

HTML：

<ul>
    {{#each deviceDrivers device.drivers}}
        <li class="text-capitalize list-unstyled">{{key}}<ul>
          {{#with value}}
          <li><a href="{{filename}}">{{title}} -> {{version}}</a><br>
            {{description}}
          </li></ul>
          {{/with}}
        </li>
    {{/each}}
</ul>

Meteor删除对象数组中的重复属性

更新

更新2

2 个答案: