[Javascript] 複数グループの配列データを特殊な順番で並び替える方法
とある会社でマーケティング用のwebページシステムを作っていた時に、別ページへのリンク一覧を表示するシステムが必要になりました。
その会社の関連ページへの遷移になるのですが、そのリストの並び順が非常に特殊だったので、該当する関数を作って対応したので、ブログに関数を残しておきます。
具体的な仕様
グループ分けされた配列データをリスト表示する時に、指定された1つのグループをメイングループとして、リスト上部に表示する。 ただし、先頭のメイングループ2個表示したら、次に1個は別のグループ表示をする。 要するに、次のような表示になる予定です。メイングループメイングループ他のグループメイングループメイングループ他のグループ...
ソースコード
基本関数 : multi_sort.js
function MultiSort(datas=[] , target_group='' , target_count=0 , other_count=0){
if(!datas
|| !datas.length
|| !target_group
|| !target_count
|| !other_count){return datas}
const targets = datas.filter(e => e.group === target_group)
const others = datas.filter(e => e.group !== target_group)
const surplus = target_count + other_count
const new_datas = []
for(let i=0; i<datas.length; i++){
const delimiter = ~~(i / surplus)
// main-target
if(i % surplus < target_count){
if(targets.length){
new_datas.push(targets.shift())
}
else if(others.length){
new_datas.push(others.shift())
}
}
// other
else{
if(others.length){
new_datas.push(others.shift())
}
else if(targets.length){
new_datas.push(targets.shift())
}
}
}
return new_datas
}
実行サンプルコード
sample.html
<script src='multi_sort.js'></script>
<ol class='lists'></ol>
<script>
window.sample_datas = [
{ "group" : "a", "name" : "name-1" },
{ "group" : "b", "name" : "name-2" },
{ "group" : "c", "name" : "name-3" },
{ "group" : "a", "name" : "name-4" },
{ "group" : "b", "name" : "name-5" },
{ "group" : "c", "name" : "name-6" },
{ "group" : "a", "name" : "name-7" },
{ "group" : "b", "name" : "name-8" },
{ "group" : "c", "name" : "name-9" },
{ "group" : "a", "name" : "name-10" }
]</script>
<script>
const datas = MultiSort(window.sample_datas, 'b' , 2 , 1)
const root = document.querySelector('.lists')
for(const data of datas){
const li = document.createElement('li')
li.textContent = `${data.group} : ${data.name}`
li.setAttribute('data-group' , data.group)
root.appendChild(li)
}
</script>
<style>
.lists li{
padding:10px;
background-color:#eee;
}
.lists li[data-group='b']{
background-color:#FEE;
}
</style>