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

Question

我正在尝试将 JSON 对象放入 Continent 然后是国家/地区的无序列表中。

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

这是我的方法：

var htmlResult = "<ul>";
var parsedLocations = {};

// Regroup object by continents containing array of countries
$.each(myLocations.Locations, function( index, value) {
  var temp = value.Place.split("_");
  var continent = temp[0];
  var country = temp[1];

  if(!parsedLocations[continent]) {parsedLocations[continent] = [];}
  parsedLocations[continent].push(country);
});

// Loop through each continent, and
$.each(parsedLocations, function(continent, countries) {
  htmlResult += "<li>" + continent + "<ul>";

  // Iterate through each country within the continent
  $.each(countries, function(index, country) {
    htmlResult += "<li>" + country + "</li>";
  });
  htmlResult += "</ul></li>";
});

htmlResult += "</ul>";

我已经分叉了你的 jsfiddle 并更新了它here

你会觉得这很有用吗:)

Answer 2

这是我的解决方案。这不是最好的，但我希望它不是最差的：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>