Query additional API Endpoint with Axios & Vue after getting results from a different endpoint

I'm utilising the following API for a World Cup Laravel app - http://api.football-data.org/docs/v1/index.html#_fixture

This information brings me back today's fixture's as I'm using this code (config just holds my API key):

const todaysMatches = new Vue({
    el: '#todaysMatches',
    data: {
        todaysMatches: [],
        flags: []
    },
    methods: {
        loadData: function () {
            axios.get("http://api.football-data.org/v1/competitions/467/fixtures/?timeFrame=p1", config)
            .then(response => {this.todaysMatches = response.data});
        }
    },
    mounted: function () {
        this.loadData();
    }
});

Inside each fixture you get an array of _links which you can see in the below screenshot:

Now, what I would like to do is query both the awayTeam api and the homeTeam api because they each have an endpoint of crestUrl which returns the country's flag.

You can see that inside my data I've set an array prop called flags so I was thinking of running additional calls inside my loadData method and populate that array for each fixture, but I don't think that's a clean way of doing it.

Can anyone suggest the best way to approach this?

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/2JPb1jo
via IFTTT