根據匹配的阿拉伯字母顯示產品清單？

Question

我想根據匹配阿拉伯字母來顯示的對象列表，我有​​字母和具有值和屬性的對象的陣列的陣列，我想根據匹配阿拉伯字母顯示對象

我使用ES2015 .map和.filter輔助方法，任何人都可以幫我解決這個問題，在此先感謝

---

JSON API

const ar_alpha = ['ا', 'ب', 'پ', 'ت', 'ث', 'ج', 'چ', 'ح', 'خ', 'د', 'ذ', 'ر', 'ز', 'ژ', 'ص', 'ض', 'ط', 'ظ', 'ع', 'غ', 'ف', 'ق', 'ک', 'گ', 'ل', 'م', 'ن', 'و', 'ه', 'ی']; 



const brands = [ 
{ 
    id: 1, 
    brand_name: 'adidas', 
    brand_trans: 'أديداس', 
    isPremium: true, 
    url: '/brands/adidas' 
}, 
{ 
    id: 2, 
    brand_name: 'adidas Originals', 
    brand_trans: 'أديداس اوريجينال', 
    isPremium: false, 
    url: '/brands/adidas-originals' 
}, 
{ 
    id: 4, 
    brand_name: 'Bodyism', 
    brand_trans: 'بودييزم', 
    isPremium: false, 
    url: '/brands/bodyism' 
}, 
{ 
    id: 5, 
    brand_name: 'Columbia', 
    brand_trans: 'كولومبيا', 
    isPremium: false, 
    url: '/brands/columbia' 
}, 
{ 
    id: 5, 
    brand_name: 'Converse', 
    brand_trans: 'كونفرس', 
    isPremium: true, 
    url: '/brands/converse' 
}, 
]; 

---

輸出應該是這樣的

  { 
      brand_group_title: 'ا', 
      brand_list: [ 
       { 
        id: 1, 
        brand_name: 'adidas', 
        brand_trans: 'أديداس', 
        isPremium: true, 
        url: '/brands/adidas' 
       }, 
       { 
        id: 2, 
        brand_name: 'adidas Originals', 
        brand_trans: 'أديداس اوريجينال', 
        isPremium: false, 
        url: '/brands/adidas-originals' 
       }, 
      ] 
     } { 
      brand_group_title: 'ب', 
      brand_list: [ 
       { 
        id: 4, 
        brand_name: 'Bodyism', 
        brand_trans: 'بودييزم', 
        isPremium: false, 
        url: '/brands/bodyism' 
       }, 
      ] 
     } { 
      brand_group_title: 'ك', 
      brand_list: [ 
       { 
        id: 5, 
        brand_name: 'Columbia', 
        brand_trans: 'كولومبيا', 
        isPremium: false, 
        url: '/brands/columbia' 
       }, 
       { 
        id: 5, 
        brand_name: 'Converse', 
        brand_trans: 'كونفرس', 
        isPremium: true, 
        url: '/brands/converse' 
       }, 
      ] 
     } 

---

我的解決方案

我已經使用ES2015的輔助功能，該解決方案在打印列表中，但不按阿拉伯字母

var printList_ar = ar_alpha.map(function (ch) { 
var matchedItems = brands.filter(function (obj) { 
    return obj.brand_trans.startsWith(ch) 
}) 
if (matchedItems.length > 0) 
    return { 
     brand_group_title: ch, 
     brand_list: matchedItems 
    }; 
    }).filter(function (res) { 
     return res != undefined 
    }); 

printList_ar; 

Answer 1

使用地圖將對象與字母鏈接起來。

const keys = ['ا', 'ب', 'پ', 'ت', 'ث', 'ج', 'چ', 'ح', 'خ', 'د', 'ذ', 'ر', 'ز', 'ژ', 'ص', 'ض', 'ط', 'ظ', 'ع', 'غ', 'ف', 'ق', 'ک', 'گ', 'ل', 'م', 'ن', 'و', 'ه', 'ی']; 
 
const data = [{ 
 
    id: 1, 
 
    brand_name: 'adidas', 
 
    brand_trans: 'أديداس', 
 
    isPremium: true, 
 
    url: '/brands/adidas' 
 
    }, 
 
    { 
 
    id: 2, 
 
    brand_name: 'adidas Originals', 
 
    brand_trans: 'أديداس اوريجينال', 
 
    isPremium: false, 
 
    url: '/brands/adidas-originals' 
 
    }, 
 
    { 
 
    id: 4, 
 
    brand_name: 'Bodyism', 
 
    brand_trans: 'بودييزم', 
 
    isPremium: false, 
 
    url: '/brands/bodyism' 
 
    }, 
 
    { 
 
    id: 5, 
 
    brand_name: 'Columbia', 
 
    brand_trans: 'كولومبيا', 
 
    isPremium: false, 
 
    url: '/brands/columbia' 
 
    }, 
 
    { 
 
    id: 5, 
 
    brand_name: 'Converse', 
 
    brand_trans: 'كونفرس', 
 
    isPremium: true, 
 
    url: '/brands/converse' 
 
    }, 
 
]; 
 
var hash = new Map() 
 
for (var i of data) { 
 
    var l = i.brand_trans[0]; 
 
    var val = hash.get(l); 
 
    if (val) { 
 
    val.push(i) 
 
    } else { 
 
    hash.set(l, [i]) 
 
    } 
 
} 
 
var result = Array.from(hash, (x, y) => { 
 
    return { 
 
    brand_group_title: x[0], 
 
    'brand_list': x[1] 
 
    } 
 
}) 
 
console.log(...result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

在這裏它是在O（N）

const keys = ['ا', 'ب', 'پ', 'ت', 'ث', 'ج', 'چ', 'ح', 'خ', 'د', 'ذ', 'ر', 'ز', 'ژ', 'ص', 'ض', 'ط', 'ظ', 'ع', 'غ', 'ف', 'ق', 'ک', 'گ', 'ل', 'م', 'ن', 'و', 'ه', 'ی'], data = [{ 
 
    id: 1, 
 
    brand_name: 'adidas', 
 
    brand_trans: 'أديداس', 
 
    isPremium: true, 
 
    url: '/brands/adidas' 
 
    }, 
 
    { 
 
    id: 2, 
 
    brand_name: 'adidas Originals', 
 
    brand_trans: 'أديداس اوريجينال', 
 
    isPremium: false, 
 
    url: '/brands/adidas-originals' 
 
    }, 
 
    { 
 
    id: 4, 
 
    brand_name: 'Bodyism', 
 
    brand_trans: 'بودييزم', 
 
    isPremium: false, 
 
    url: '/brands/bodyism' 
 
    }, 
 
    { 
 
    id: 5, 
 
    brand_name: 'Columbia', 
 
    brand_trans: 'كولومبيا', 
 
    isPremium: false, 
 
    url: '/brands/columbia' 
 
    }, 
 
    { 
 
    id: 5, 
 
    brand_name: 'Converse', 
 
    brand_trans: 'كونفرس', 
 
    isPremium: true, 
 
    url: '/brands/converse' 
 
    }, 
 
]; 
 

 
var result = Array.from(
 
    data.reduce((acc, o) => acc.has([o.brand_trans[0]]) ? acc.get([o.brand_trans[0]]).push(o) : acc.set([o.brand_trans[0]], [o]), new Map), 
 
    (([k, v]) => ({ 
 
    brand_group_title: k, 
 
    brand_list: v 
 
    })) 
 
); 
 

 

 
console.log(...result);