Question

我有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格式，然后我需要实现设计。

任何人都可以提供这个想法，如何实施。

Answer 1

将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
}

现在，listDataGroups的结构基本上就像你想要显示的那样。

要将其转换为html，请遍历listDataGroups数组并创建一个html字符串，如下所示：

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>'
}

然后将html放在您想要它的DOM中并应用css样式。

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

1 个答案: