卖座城市列表渲染

image.png

var test= {} //数据源

// 热门城市替换
var hotStr = ''
for( var k = 0 ; k < test.cities.length ; k++ ){
if( test.cities[k].isHot == 1 ){
// 循环遍历获取热门城市，并将其拼接成字符串
hotStr += <span class="hotCity03">${test.cities[k].name}</span>
}
}
// 将热门城市加入到城市列表
document.querySelector( '.hotCity01' ).innerHTML = hotStr

// 城市列表替换
    var obj = {}
    // console.log( test )
    console.log( test )
    var arr = test.cities
    console.log( arr )
    for( var i = 0 ; i < arr.length ; i++ ){
        if( obj[ arr[i].pinyin[0].toLocaleUpperCase() ] ){        
            obj[ arr[i].pinyin[0].toLocaleUpperCase() ].push(  arr[i].name  )
        }else{
            obj[ arr[i].pinyin[0].toLocaleUpperCase() ] = [ arr[i].name ]
        }
    }
    console.log( obj )

    // 得到数组
    var resultArr = []
    for( var key in obj ){
        resultArr.push( {
            key:key,
            value:obj[key]
        } )
    }
    console.log( resultArr )

    // // 数组对象排序
    resultArr.sort(function( a,b ){
        return a.key > b.key ? 1:-1
    })
    console.log( resultArr )
    
    //  创建以个函数确定导入的内容
    function change( temp ){
        var str1 = ''
        for( var i = 0 ; i < temp.length ; i++ ){
            str1 += `<li>${temp[i]}</li>`
        }
        return str1
    }
    // // 将数据渲染到页面
    var str = ''
    for( var j = 0 ; j < resultArr.length ; j++ ){
        var temp = resultArr[j].value
        change( temp )
        str += `<P class="one">${resultArr[j].key}</P>
                <ul class="oneList">
                    ${change(temp)}
                </ul>`
    }
    document.querySelector( '.mianCont' ).innerHTML = str