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 names.

为此您需要两个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屋！