私は次のようないくつかの属性を持つ要素のリストを持っています
doc.title = 'some title'
doc.category = 'book'
doc.year = '2016'
他の可能なカテゴリは、紙、記事などです。
ここで、「カテゴリで並べ替え」と「年で並べ替え」の2つのボタンがあるとします。
[カテゴリで並べ替え]をクリックすると、リストは次のようになります。
Book
1. book 1
2. book 2
Paper
1. paper 1
2. paper 2
Article
1. article 1
2. article 2
そして、「年で並べ替え」ボタンがクリックされたとき
2016
1.
2.
3.
2015
1.
2.
等々。
HTMLページのサイズをできるだけ小さくしてこれを実行したいと思います。これを達成するための最良の方法を教えてください。
このような何かがあなたを始めるはずです-コードは説明でコメントされています（実際にそれを見てください）：
// convert array of objects into a Map grouped and ordered by supplied key
function group(items, key) {
// get unique values for grouping key
const unique = [
...new Set(items.map(item => item[key]))
];
// will be ascending by default
unique.sort();
// sorting all of the results by title field
const sortFn = (a, b) => a.title > b.title;
const sortItems = (val) => {
// filters the result set to items sharing the current group field value
let sorted = items.filter(item => item[key] === val);
// sort by title
sorted.sort(sortFn);
return sorted;
}
// reduce to a Map (which preserves insertion order and maintains the group key sorting)
return unique.reduce((map, cur) => map.set(cur, sortItems(cur)), new Map());
}
// testing it out
data = [{
title: 'foo',
category: 'book',
year: 2016,
}, {
title: 'bar',
category: 'book',
year: 2016,
}, {
title: 'blah',
category: 'paper',
year: 2010,
}, {
title: 'idk',
category: 'paper',
year: 2015,
}]
group(data, 'category'); // Map {"book" => [Object, Object], "paper" => [Object, Object]}
group(data, 'year'); // Map {2010 => [Object], 2015 => [Object], 2016 => [Object, Object]}
表示するには、デストラクチャリングで使用できますfor...of。
for (let [category, items] of group(data, 'category')) {
console.log(`
<div class="item">
<h3>${category}</h3>
<ol>${items.map(item => `<li>${item.title}</li>`).join('')}</ol>
</div>
`);
}
全体を通してES6を使用していましたが、これは簡単にリファクタリングして下位互換性を高めることができます。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加