グループの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

この#bodyDivはあなたが移入したいdiv要素のIDです、ここでこの

$(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>') 
} 
}) 

のようなロジックのビットを用いて達成することができる...

Answer 2

は、ここで私の解決策、ですcan 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); 
})