流星删除对象数组中的重复项属性

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.

更新

我使用得到了想要的结果。

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

在他的编辑后完美运行。

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 remove duplicate property in an array of objects

javascript

object

handlebars.js

meteor

spacebars

更新

更新 2

流星删除对象数组中的重复项 属性

Meteor remove duplicate property in an array of objects

javascript

object

handlebars.js

meteor

spacebars

更新

更新 2

流星删除对象数组中的重复项属性