VueJS显示对象的分组数组 [英] VueJS display grouped array of objects
问题描述
我正在从API中获取国家/地区列表,并希望按次区域(大陆)按组显示它们.像这样:
I'm fetching a list of countries from the API and I want to display them in groups by subregion (continent). Like that:
API给我一个响应,该响应是一个对象(国家)的数组,每个对象都有一个名为"subregion"的键-我想按该键分组. 我使用lodash进行分组,但是也许有一个我不熟悉的Vue方法. 我的JS代码:
API gives me a response which is an array of objects (countries) and for each object there is a key called 'subregion' - I want to group by that key. I use lodash for grouping, but maybe there is a Vue method I'm not familiar with. My JS code:
var app = new Vue({
el: '#app',
data: {
countries: null,
},
created: function () {
this.fetchData();
},
methods: {
fetchData: function() {
var xhr = new XMLHttpRequest();
var self = this;
xhr.open('GET', apiURL);
xhr.onload = function() {
var countryList = JSON.parse(xhr.responseText);
self.countries = _.groupBy(countryList, "subregion");
};
xhr.send();
},
},
});
和HTML:
<li v-for="country in countries">
{{ country.name }} (+{{ country.callingCodes[0] }})
</li>
如何实现图片中的内容?
How can I achieve what's in the picture?
推荐答案
您已使用lodash将以下国家/地区正确地按国家/地区分组.
You've correctly grouped countries by their subregion using lodash with the following code.
_.groupBy(countryList, "subregion")
这为您提供了一个对象,其键是子区域的名称,值是具有该子区域的对象的数组.
This has given you an object whose keys are names of subregions, and the values are arrays of objects with such subregion.
所以您的错误是您希望countries
中的值包含name
.相反,它包含具有name
s的对象的 array .
So your mistake is that you expect a value in countries
to contain name
. Instead, it contains an array of objects with name
s.
为此您需要两个for循环.
You need two for-loops for this.
这是一个简单的实现.这也是垃圾桶.
Here's a vanilla implementation. Here's a bin, too.
fetch('https://restcountries.eu/rest/v2/all')
.then(r => r.json())
.then(data => {
const grouped = _.groupBy(data, 'subregion')
const listOfSubregions = Object.keys(grouped)
listOfSubregions.forEach(key => {
console.log(' =========== ' + key + ' =========== ')
const countriesInThisSubregion = grouped[key]
countriesInThisSubregion.forEach(country => {
console.log(country.name + ' ' + country.callingCodes[0])
})
})
})
使用Vue,您将具有类似以下内容(未经测试,但根据上面的代码应该很容易推论).
With Vue, you'd have something like the following (not tested, but should be super-easy to deduce based on the above code).
<li v-for="subregion in subregions">
<ul>
<li v-for="country of subregion">
{{ country.name }} ({{ country.callingCodes[0] }})
</li>
</ul>
</li>
这篇关于VueJS显示对象的分组数组的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!