VueJS display grouped array of objects

Question

I'm fetching a list of countries from the API and I want to display them in groups by subregion (continent). Like that:

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();
    },
  },
});

And HTML:

<li v-for="country in countries">
        {{ country.name }} (+{{ country.callingCodes[0] }})
</li>

How can I achieve what's in the picture?

VueJS does not have helper methods like that for grouping of data: it is not designed to do that. It simply provides a framework for MVVC data binding. Can you share an example of the JSON response you get? — Terry
– Terry, Commented Aug 27, 2017 at 16:01
@Terry sure, this is the exact response restcountries.eu/rest/v2/all — user7605119
– user7605119, Commented Aug 27, 2017 at 16:27

Lazar Ljubenović · Accepted Answer · 2018-08-11 11:00:41Z

4

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.

So your mistake is that you expect a value in countries to contain name. Instead, it contains an array of objects with names.

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])
      })
    })
  })

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>

edited Aug 11, 2018 at 11:00

answered Aug 27, 2017 at 16:52

Lazar Ljubenović

19.9k10 gold badges58 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user7605119 Over a year ago

After thinking about it a bit, I came to the same conclusion. Thanks for help!

Guillaume Over a year ago

How can you groupBy with 2 keys ?

Collectives™ on Stack Overflow

VueJS display grouped array of objects

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related