按类别打破JSON字符串简介排序列表

时间:2016-06-20 19:56:46

标签: javascript jquery json each

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

JSON看起来像:

return !$this->shippingRate ? null : $this->priceCurrency->convertAndFormat($this->shippingRate->getPrice());

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

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] + ')');
}

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

任何帮助都将不胜感激。

2 个答案:

答案 0 :(得分:2)

这是我的解决方案。它不是最好的,但我希望它不是最坏的:D 对于任何问题/抱怨我在这里。希望它有所帮助

&#13;
&#13;
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'))
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="country-list">
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

这是我的方法:

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

你觉得这很有用:)