javascript - 解析数据并在字母下按字母顺序排列

Question

这就是我想成为的：

这是我的 JavaScript：

var retrievedObject = localStorage.getItem('exhibitor');

    // CALL FUNCTION
    parsePerObject(JSON.parse(retrievedObject));

    function parsePerObject(data){

    }

这是我在 localStorage 中的对象：

{"41873":{"id":"41873","external_id":"","eventid":"5588","venueid":"0","exhibitorcategoryid":"0","name":" Niels Vroman","shortname":"","booth":"","imageurl":"","mapid":"0","y1":"0","x1":"0"," x2":"0","y2":"0","description":"Niels uit Zulte.","tel":"0497841121","address":"Drogenboomstraat 54","email":"vroman. niels@hotmail.com","web":" http://nielsvroman.be","code":"","username":"","password":"","image1":"","imagedescription1":"","image2":"","imagedescription2":"" ,"image3":"","imagedescription3":"","image4":"","imagedescription4":"","image5":"","imagedescription5":"","image6":"", "imagedescription6":"","image7":"","imagedescription7":"","image8":"","imagedescription8":"","image9":"","imagedescription9":""," image10":"","imagedescription10":"","image11":"","imagedescription11":"","image12":"","imagedescription12":"","image13":"","imagedescription13":"","image14":""," imagedescription14":"","image15":"","imagedescription15":"","image16":"","imagedescription16":"","image17":"","imagedescription17":"","image18 ":"","imagedescription18":"","image19":"","imagedescription19":"","image20":"","imagedescription20":"","order":"0","brands ":[],"类别":[],"linktodetails":true,"imagethumb":""},"41877":{"id":"41877","external_id":"","eventid":"5588","venueid":"0","参展商categoryid":"0","name":"Ferdau Daems","shortname":"","booth":"","imageurl":"","mapid":"0","y1":" 0","x1":"0","x2":"0","y2":"0","description":"Ferdau Daems","tel":"0497683697","address":"Waregem ","email":"fer.dau@gmail.com","web":"41877","external_id":"","eventid":"5588","venueid":"0","exhibitorcategoryid":"0","name":"Ferdau Daems","shortname":"", "展位":"","imageurl":"","mapid":"0","y1":"0","x1":"0","x2":"0","y2": "0","description":"Ferdau Daems","tel":"0497683697","address":"Waregem","email":"fer.dau@gmail.com","web":"41877","external_id":"","eventid":"5588","venueid":"0","exhibitorcategoryid":"0","name":"Ferdau Daems","shortname":"", "展位":"","imageurl":"","mapid":"0","y1":"0","x1":"0","x2":"0","y2": "0","description":"Ferdau Daems","tel":"0497683697","address":"Waregem","email":"fer.dau@gmail.com","web":"Ferdau Daems","shortname":"","booth":"","imageurl":"","mapid":"0","y1":"0","x1":"0"," x2":"0","y2":"0","description":"Ferdau Daems","tel":"0497683697","address":"Waregem","email":"fer.dau@gmail .com","网络":"Ferdau Daems","shortname":"","booth":"","imageurl":"","mapid":"0","y1":"0","x1":"0"," x2":"0","y2":"0","description":"Ferdau Daems","tel":"0497683697","address":"Waregem","email":"fer.dau@gmail .com","网络":"电子邮件":"fer.dau@gmail.com","web":"电子邮件":"fer.dau@gmail.com","web":"http://ferdau.be","code":"","username":"","password":"","image1":"","imagedescription1":"","image2":"","imagedescription2":"" ,"image3":"","imagedescription3":"","image4":"","imagedescription4":"","image5":"","imagedescription5":"","image6":"", "imagedescription6":"","image7":"","imagedescription7":"","image8":"","imagedescription8":"","image9":"","imagedescription9":""," image10":"","imagedescription10":"","image11":"","imagedescription11":"","image12":"","imagedescription12":"","image13":"","imagedescription13":"","image14":""," imagedescription14":"","image15":"","imagedescription15":"","image16":"","imagedescription16":"","image17":"","imagedescription17":"","image18 ":"","imagedescription18":"","image19":"","imagedescription19":"","image20":"","imagedescription20":"","order":"0","brands ":[],"类别":[],"链接到详细信息":true}}

有谁知道我如何按名称的字母顺序排序并从第一个字母制作标题？

Answer 1

假设您有一个Array对象，而不是Object对象，来启用索引和排序。对象没有顺序。

您从中检索它localStorage。你解析它。

var people = JSON.parse(localStoarge.getItem("exhibitor");
// now you have an array of objects, each object representing a person.
// regardless of what structure you have now, change it to achieve this.
var comparePersons = function(a, b) {
    // this function will compare two people objects.
    return a.name.localeCompare(b.name);
    // it's using String.prototype.localeCompare which returns 1 if a.name > b.name,
    // 0 for equal and -1 for smaller. localeCompare is lexicographic comparison.
};
people.sort(comparePersons);
// now you have the people sorted alphabetically.

您可以遍历 people 数组，获取唯一的起始字母，将它们组成一个数组，然后根据需要显示数据。它应该相当简单。

var letters = '', groups = {};
for (var i = 0, len = people.length; i < len; i++) {
     var letterKey = people[i].name.charAt(0).toLowerCase();// get the first letter
     if (letters.indexOf(letterKey)) == -1) {
         letters += letterKey;
         groups[letterKey] = [people[i]];// index the people by unique letters.
     } else {
         groups[letterKey].push([people[i]]);// add to the existing list. Another Syntax fix
     };
};

此时你有一个像这样的对象：

a: [person1, person2, person5, etc..]//the people at A.
b: [person 3, person 4, etc..]// the people at B.

只需使用上面的数据来创建显示。还有更多，我将不得不向您开具发票:)。

这里的技巧是Array.prototype.sort（这里有更多关于它）和String.prototype.localeCompare（在这里阅读更多）。