基于字母顺序文本的数据显示，使用javascript、html

我有json，我正在尝试根据字母顺序文本排序，我附上了示例图像的外观和感觉

示例Json：

{
  "listData": [
    {
      "id": "1",
      "name": "Audi",
      "desc": "Hello World",
      "price": "55",
      "src": "01.png"
    },
    {
      "id": "1",
      "name": "alfa Romeo",
      "desc": "Hello World",
      "price": "55",
      "src": "01.png"
    },
    {
      "id": "1",
      "name": "BMW",
      "desc": "Hello World",
      "price": "55",
      "src": "01.png"
    },
    {
      "id": "1",
      "name": "Chevrolet",
      "desc": "Hello World",
      "price": "55",
      "src": "01.png"
    },
    {
      "id": "1",
      "name": "Chrysler",
      "desc": "Hello World",
      "price": "55",
      "src": "01.png"
    },
    {
      "id": "1",
      "name": "Dacia",
      "desc": "Hello World",
      "price": "55",
      "src": "01.png"
    },
    {
      "id": "1",
      "name": "Dodge",
      "desc": "Hello World",
      "price": "55",
      "src": "01.png"
    },
    {
      "id": "1",
      "name": "Daihatsu",
      "desc": "Hello World",
      "price": "55",
      "src": "01.png"
    }
  ]
}

因此，我需要显示图片上方的文本。 我认为首先我需要更改javascript代码中使用的json格式，然后我需要实现设计

---

任何人都可以提供想法，如何实现。

将listData数组划分为子数组。每个字母有一个子数组。 为此，需要遍历listData中的每个元素，并查看name属性中的第一个字符。然后为该字母创建一个新数组，或将其添加到该字母的现有数组中

var jsonData = /*YOUR JSON HERE*/
var listDataGroups = {}

for(var i=0;i<jsonData.listData.length;i++){
    var letter = jsonData.listData[i].name.slice(0,1).toUpperCase() // get first character and put it to uppercase

    if(!listDataGroups[letter]) // check if no sub-array for that letter exists
        listDataGroups[letter] = [] // in that case create a new sub-array

    listDataGroups[letter].push(jsonData.listData[i]) // push the current element of listData into the sub-array
}

var jsonData=/*您的JSON在这里*/
var listDataGroups={}
对于（var i=0；i
var html = ''
for(var letter in listDataGroups){
    html += '<div>' // create container div
    html += '<div class="letter-big">'+letter+'</div>' // create div for big letter
    html += '<div class="names-list">'; // create div for name list
    for(var i=0;i<listDataGroups[letter].length;i++){
        html += listDataGroups[letter][i].name + '<br>' //  write out names for this letter
    }
    html += '</div>'
    html += '</div>'
}