JSON格式

[{"name": "Sri Lanka","region":"Asia"}, {"name": "India","region":"Asia"}, {"name": "kenya","region":"Africa"}, {"name": "Zimbabwe","region":"Africa"}]

我想显示如下

  • 非洲
  • 肯尼亚
  • 津巴布韦

  • 亚洲

  • 印度
  • 斯里兰卡

===============>>#1 票数:1 已采纳

尝试

 var data = [{ "name": "Sri Lanka", "region": "Asia" }, { "name": "India", "region": "Asia" }, { "name": "Kenya", "region": "Africa" }, { "name": "Zimbabwe", "region": "Africa" }]; $.each(data, function(key, val) { // if `body` does not already have `ul` having // `class` `region` , append `ul` with first `name` // utilize `b` element as "header" for `ul` , // to render `region` "header" above `ul` `li` `name`s if (!$("body ul." + val.region).is("*")) { $("<ul />", { "class": val.region, "html": "<li>" + val.name + "</li>" }) .appendTo("body") .before("<b class=" + val.region + ">" + val.region + "</b>"); } else { // if `b` `textContent` is `region` , // append remaining `name` to `ul` that follows `b` $("b." + val.region).each(function() { if (this.textContent === val.region) { $(this).next("ul").append("<li>" + val.name + "</li>") } }) } }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> 

===============>>#2 票数:1

假设要按地区名称然后按国家名称排序,请按照以下步骤操作。

首先,将国家/地区阵列转换为对象,其属性是国家/地区阵列。 这个中间步骤比直接转换为区域数组更简单。

var regions = {};
$.each(countries, function(i, obj) {
    if(!regions[obj.region]) {
        regions[obj.region] = [];
    }
    regions[obj.region].push(obj.name);
});

然后,将regions对象转换为regions的排序数组。

var sortedRegions = $.map(regions, function(value, key) {//key is a region name, value is an array of the region's countries
    value.sort(function(a, b) { return a.toUpperCase() > b.toUpperCase(); });//sort the arrays of countries alphabetically
    return {'region': key, 'countries': value};
}).sort(function(a, b) { return a.region.toUpperCase() > b.region.toUpperCase(); });//sort the mapped array of regions alphabetically

然后将sortedRegions转换为所需的HTML。

var html = sortedRegions.reduce(function(html_1, r) {
    return html_1 + r.countries.reduce(function(html_2, c) {
        return html_2 + '<li>' + c + '</li>';
    }, '<li>' + r.region + '</li><li><ul>') + '</ul></li>';
}, '<ul>') + '</ul>';

现在,您可以将HTML推送到DOM中:

$("#myContainer").html(html);

演示

  ask by Manas Ranjan Pradhan translate from so

未解决问题?本站智能推荐: