組陣列通過jQuery的名稱和顯示的列表

Question

我有一個數組是這樣的：

{ 
"data": [ 
{ 
    "cityname": "Newyork", 
    "countryname": "USA" 
}, 
{ 
    "cityname": "amsterdam", 
    "countryname": "Netherland" 
},{ 
    "cityname": "Washington", 
    "countryname": "USA" 
},{ 
    "cityname": "London", 
    "countryname": "UK" 
},{ 
    "cityname": "Los Angeles", 
    "countryname": "USA" 
},{ 
    "cityname": "Assen", 
    "countryname": "Netherland" 
}, 
,{ 
    "cityname": "Liverpool", 
    "countryname": "UK" 
}, 
,{ 
    "cityname": "chicago", 
    "countryname": "USA" 
}, 
{ 
    "cityname": "New Delhi", 
    "countryname": "India" 
}, 
] 
} 

我的目標是列出相應countries.In此陣下的所有城市中，有相同的國名。我想在jquery中按countryname對這個數組進行分組。並且想要列出像這樣的國家和城市。

<label>USA</label> 
<ul> 
<li>Newyork</li> 
<li>Washington</li> 
<li>Chikago</li> 
<li>Los Angeles</li> 
</ul> 

<label>UK</label> 
<ul> 
<li>London</li> 
<li>Liverpool</li> 
</ul> 

<label>Netherland</label> 
<ul> 
<li>Amsterdam</li> 
<li>Assen</li> 
</ul> 

<label>India</label> 
<ul> 
<li>New Delhi</li> 
</ul> 

那麼我怎麼能在沒有使用任何插件的jQuery中以更好的方式做到這一點？請幫忙。謝謝。

Answer 1

這可以用一個比特的邏輯是這樣

$(data).each(function(){ 
if($('#'+this.countryname).length) 
{ 
    $('#'+this.countryname).append('<li>'+this.cityname+'</li>') 
} 
else 
{ 
$('#bodyDiv').append('<label>'+this.countryname+'</label><ul id="'+this.countryname+'"></ul>') 
$('#'+this.countryname).append('<li>'+this.cityname+'</li>') 
} 
}) 

實現這裏#bodyDiv是要填充的div元素的ID ...

Answer 2

這裏是我的解決方案，你可以see in action on JSFiddle here。

data.forEach(function(datum) { 
    let countryList = $('[data-countryname='+datum.countryname+']'); 
    if(countryList.length === 0) { 
    let newLabel = document.createElement('label'); 
    let newList = document.createElement('ul'); 
    $(newLabel).html(datum.countryname); 
    $(newList).attr('data-countryname',datum.countryname); 
    $('body').append(newLabel); 
    $('body').append(newList); 
    countryList = newList; 
    } 
    let newListItem = document.createElement('li'); 
    $(newListItem).html(datum.cityname); 
    countryList.append(newListItem); 
})