javascript - 按类别打破 JSON 字符串介绍有序列表

Question

我正在尝试将 JSON 对象放入按大陆和国家排列的无序列表中。

JSON 看起来像:

var mylocations = '{
    "Locations":[
        {"Place":"Africa_Egypt"},
        {"Place":"Africa_SouthAfrica"},
        {"Place":"Africa_SouthAfrica"},
        {"Place":"Africa_SouthAfrica"},
        {"Place":"Americas_Brazil"},
        {"Place":"Americas_Canada"},
        {"Place":"Americas_USA"},
        {"Place":"Europe_Switzerland"},
        {"Place":"Europe_UK"}
    ]
}';

这是我到目前为止所拥有的:

arr = $.parseJSON(mylocations);
var continent = {},
    country;

$.each(arr.Locations, function( i, el ) {
    var ul = $('<ul></ul>');
    country = el.Place.substr(0, el.Place.indexOf("_"));

    if (continent.hasOwnProperty(country)) {
        continent[country] += 1;
        children = $('<li>' + country + '</li>');
        children.appendTo('ul')
    }
    else {
        $('#country-list').append(ul);
        continent[country] = 1;
    }
});

// print results
for(var key in continent){
    console.log(key + ' (' + continent[key] + ')');
}

我追求的是:

<ul>
    <li>
        Continent
        <ul>
            <li>Country</li>
            <li>Country</li>
        </ul>
    </li>
    <li>
        Continent
        <ul>
            <li>Country</li>
            <li>Country</li>
        </ul>
    </li>
</ul>

努力让这个工作正常进行。这是我到目前为止所拥有的: jsfiddle

如有任何帮助，我们将不胜感激。

Answer 1

这是我的解决方案。这不是最好的，但我希望这不是最坏的:D 对于任何问题/投诉，我都在这里。希望对您有帮助

console.log(arr)
var ul = $('<ul></ul>');
var mylocations = '{"Locations":[{"Place":"Africa_Egypt"},{"Place":"Africa_SouthAfrica"},{"Place":"Africa_SouthAfrica"},{"Place":"Africa_SouthAfrica"},{"Place":"Americas_Brazil"},{"Place":"Americas_Canada"},{"Place":"Americas_USA"},{"Place":"Europe_Switzerland"},{"Place":"Europe_UK"}]}';
  
var arr = $.parseJSON(mylocations);

var locations = {}
$.each(arr.Locations, function( i, el ) {
  var delimiter = el.Place.indexOf("_");
  var continent = el.Place.substr(0, delimiter);
  var country = el.Place.substr(delimiter+1, el.Place.length);

  locations[continent] = locations[continent] || []
  locations[continent].push(country)
});

for(var continent in locations) {
  $('<li>' + continent + '</li>').appendTo(ul)
  var continentUL = $('<ul></ul>');
  for(var countryIndex in locations[continent]) {
      $('<li>' + locations[continent][countryIndex] + '</li>').appendTo(continentUL)
  }	
  continentUL.appendTo(ul)
}

ul.appendTo($('#country-list'))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="country-list">
</div>