如何使用jquery从JSON文件中获取地区国家列表

JSON格式

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

我想显示如下

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

• 亚洲

• 印度
• 斯里兰卡

试试看

var数据=[{
“名称”：“斯里兰卡”，
“区域”：“亚洲”
}, {
“名称”：“印度”，
“区域”：“亚洲”
}, {
“名称”：“肯尼亚”，
“区域”：“非洲”
}, {
“姓名”：“津巴布韦”，
“区域”：“非洲”
}];
$。每个（数据、函数（键、值）{
//如果'body'还没有'ul'having
//`class``region`，在`ul`后面加上名字`name`
//使用'b'元素作为'ul'的“头”，
//要在`ul``li``name`的上方呈现`region``标题
如果（！$（“body ul.”+val.region.）为（“*”）{
$（“
”{
“类”：val.region，
“html”：“
”+val.name+”
”
})
.附件（“正文”）
。之前（“+val.region+”）；
}否则{
//如果'b``textContent`是'region`，
//在'b'后面的'ul'后面附加剩余的'name'`
$（“b.”+val.region）。每个（函数（）{
if（this.textContent==val.region）{
$（this）.next（“ul”）.append（“
”+val.name+”
”）
}
})
}
});
假设您希望先按地区名称排序，然后按国家名称排序，请按以下步骤进行操作

首先，将国家数组转换为对象，对象的属性为国家数组。此中间步骤比直接转换为区域数组更简单

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

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

然后，将
区域
对象转换为已排序的区域数组

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

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

然后将
sortedregion
转换为所需的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>';

如果你可以更改JSON，那么你真的应该做
{“地区”：{“非洲”：[…，…，…，…]，“亚洲”：[…，…，…，…，…]）
[这里有一种使用jQuery的方法。each][1][1]：如果下面的答案之一回答了你的问题，这个网站的工作方式，你会“接受”答案如下：。但前提是您的问题确实得到了回答。谢谢@Romer-1888。这对我帮助很大。@ManasRanjanPradhan可以为“滚动功能”创建单独的问题，包括描述，尝试了什么，预期的结果？我将其作为一个单独的问题发布。您共享的用于获取JSON数据的代码在FF、Chrome、IE10上运行良好。但对于IE8，它不起作用。还有其他方法吗？？？@ManasRanjanPradhan不幸的是，目前无法访问IE8环境进行测试。Ac根据，ie8发布于2009年？；可能建议ie8用户至少更新到ie10？我正在尝试使用wrapAll（）将“”和“
”包装为“
”，但这只是包装“”元素。还有其他方法吗？