javascript - VueJS 显示分组的对象数组

Question

我正在从 API 获取国家/地区列表，我想按次区域(大陆)分组显示它们。像那样:

API 给我一个响应，它是一个对象(国家)数组，每个对象都有一个名为“子区域”的键 - 我想按该键分组。我使用lodash进行分组，但可能有一个我不熟悉的Vue方法。我的 JS 代码:

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>

我怎样才能实现图片中的内容？

Answer 1

您已使用带有以下代码的 lodash 按次区域对国家/地区进行了正确分组。

_.groupBy(countryList, "subregion")

这为您提供了一个对象，其键是子区域的名称，值是具有该子区域的对象数组。

所以您的错误是您期望 countries 中的值包含 name。相反，它包含一个 array 对象，这些对象具有 name。

为此你需要两个 for 循环。

这是一个普通的实现。这是 a bin ，也是。

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，你会得到类似下面的东西(没有测试，但根据上面的代码应该非常容易推导出来)。

<li v-for="subregion in subregions">
  <ul>
    <li v-for="country of subregion">
        {{ country.name }} ({{ country.callingCodes[0] }})
    </li>
  </ul>
</li>