我有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格式,然后我需要实现设计。
任何人都可以提供这个想法,如何实施。
答案 0 :(得分:0)
将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样式。