javascript - 關于這組數據如何實現 按字母列表分類展示 不改動數據結構
問題描述
var data = [{ 'name': '渦陽', 'pinyin': 'WoYang'}, { 'name': '邳州', 'pinyin': 'PiZhou'}, { 'name': '玉溪', 'pinyin': 'YuXi'}, { 'name': '無錫', 'pinyin': 'WuXi'}, { 'name': '萍鄉', 'pinyin': 'PingXiang'}];
按照字母 A B C ...列表歸類 如
P-> { 'name': '萍鄉', 'pinyin': 'PingXiang' }, { 'name': '邳州', 'pinyin': 'PiZhou' }
類似鏈接描述
怎么操作這組數據。。
我的代碼,比較渣 求更優雅的寫法function jsfu(data) { var obj={} data.map(function(item, index) {let codeIndex = item.pinyin.charAt(0)if (!obj[codeIndex]) { obj[codeIndex] = {item: [] }} obj[codeIndex].item.push(item) }) return obj}怎么排序,發現在頁面是無序的,是js對象無序特性!
問題解答
回答1:function jsfu(data) { var map = {} , arr = [] , dest = [] for (let i = 0; i < data.length; i++) {arr.push({ code: data[i].pinyin.charAt(0), item: data[i]}) } for (let i = 0; i < arr.length; i++) {if (!map[arr[i].code]) { dest.push({code: arr[i].code,item: [arr[i].item] }) map[arr[i].code] = arr[i].code} else { for (let j = 0; j < dest.length; j++) {if (dest[j].code == arr[i].code) { dest[j].item.push(arr[i].item); break;} }} } //排序 dest.sort(function(a, b) {if (a.code > b.code) { return 1;}if (a.code < b.code) { return -1;}return 0; }) return dest}jsfu(data)
[ {'code': 'P','item': [ {'name': '邳州','pinyin': 'PiZhou' }, {'name': '萍鄉','pinyin': 'PingXiang' }] }, {'code': 'W','item': [ {'name': '渦陽','pinyin': 'WoYang' }, {'name': '無錫','pinyin': 'WuXi' }] }, {'code': 'Y','item': [ {'name': '玉溪','pinyin': 'YuXi' }] }]回答2:
data = data.sort(function(a, b) { return a.pinyin[0].localeCompare(b.pinyin[0])})console.log(JSON.stringify(data))
相關文章:
1. javascript - 如何判斷用戶切換到了當前標簽頁?2. javascript - H5頁面怎么查看console信息?3. css - 移動端 盒子內加overflow-y:scroll后 字體會變大4. javascript - webpack 報錯 新人 求解5. java - 在搭建ssm的過程中 用junit測試Dao層 怎么樣都報錯 說連接不上jdbc6. linux - Ubuntu下編譯Vim8(+python)無數次編譯失敗7. java - Mybatis關聯查詢8. 前端 - CSS3 box-shadow如何設置,或者用什么方法可以產生圖中這樣陰影的效果。9. nginx 80端口反向代理多個域名,怎樣隱藏端口的?10. java - 新手做一個安卓視頻播放器,想實現一個進度條,按鈕那種在視頻下方懸浮的功能,不知道思路!
