关于这组数据如何实现按字母列表分类展示不改动数据结构_Html5_论坛

关于这组数据如何实现按字母列表分类展示不改动数据结构

陈***0 分类：Html5 人气：958 回帖：2 发布于6年前收藏

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对象无序特性！

标签：node.js html5 javascript

讨论这个帖子（2）垃圾回帖将一律封号处理……

Lv6 码匠

99***99 其它 6年前#1

data = data.sort(function(a, b) {
    return a.pinyin[0].localeCompare(b.pinyin[0])
})
console.log(JSON.stringify(data))

Lv5 码农

龙***4 页面重构设计 6年前#2

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"
            }
        ]
    }
]

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取