javascript - 關(guān)于這組數(shù)據(jù)如何實(shí)現(xiàn) 按字母列表分類展示 不改動(dòng)數(shù)據(jù)結(jié)構(gòu)
問(wèn)題描述
var data = [{ 'name': '渦陽(yáng)', 'pinyin': 'WoYang'}, { 'name': '邳州', 'pinyin': 'PiZhou'}, { 'name': '玉溪', 'pinyin': 'YuXi'}, { 'name': '無(wú)錫', 'pinyin': 'WuXi'}, { 'name': '萍鄉(xiāng)', 'pinyin': 'PingXiang'}];
按照字母 A B C ...列表歸類 如
P-> { 'name': '萍鄉(xiāng)', 'pinyin': 'PingXiang' }, { 'name': '邳州', 'pinyin': 'PiZhou' }
類似鏈接描述
怎么操作這組數(shù)據(jù)。。
我的代碼,比較渣 求更優(yōu)雅的寫(xiě)法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}怎么排序,發(fā)現(xiàn)在頁(yè)面是無(wú)序的,是js對(duì)象無(wú)序特性!
問(wèn)題解答
回答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': '萍鄉(xiāng)','pinyin': 'PingXiang' }] }, {'code': 'W','item': [ {'name': '渦陽(yáng)','pinyin': 'WoYang' }, {'name': '無(wú)錫','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))
相關(guān)文章:
1. docker安裝后出現(xiàn)Cannot connect to the Docker daemon.2. Docker for Mac 創(chuàng)建的dnsmasq容器連不上/不工作的問(wèn)題3. android - 項(xiàng)目時(shí)間長(zhǎng)了,字符串文件strings有的字符串可能是多余的,有沒(méi)有辦法快速檢測(cè)那些是沒(méi)用的?4. 刷新頁(yè)面出現(xiàn)彈框5. PC 手機(jī)兼容的 編輯器6. mysql - 用PHPEXCEL將excel文件導(dǎo)入數(shù)據(jù)庫(kù)數(shù)據(jù)5000+條,本地?cái)?shù)據(jù)庫(kù)正常,線上只導(dǎo)入15條,沒(méi)有報(bào)錯(cuò),哪里的問(wèn)題?7. css - 關(guān)于border-image8. android - 七牛單次上傳單張圖片,11次6次上傳失敗9. angular.js - angularJs ngRoute怎么在路由傳遞空字符串及用ng-switch取得10. javascript - 怎么看網(wǎng)站用了什么技術(shù)框架?
