如何使用jQuery从JSON文件中提取区域明智的国家/地区列表

Question

JSON格式

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

我想显示如下

• 非洲
• 肯尼亚

• 津巴布韦

• 亚洲

• 印度
• 斯里兰卡

Answer 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> 

Answer 2

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

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

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);

演示