CODEWITHSUNDEEP
javascripthtmlapivue.jsaxios
Chris Dow
Chris Dow

Reputation: 5

Combine multiple APIs with the same array path

Using VUE and Axios I am attempting to pull data from Blizzards API server - I want to get the data from different game regions. The code I am using loads the data from both regions, but only puts one set in my table.

My VUE

const vm = new Vue({
el: '#app',
data: {
    ladderTeams: [],


},
mounted() {
    this.pullGMS();
},
methods: {

    async pullGMS() {

        axios.all([
            axios.get('https://us.api.blizzard.com/sc2/ladder/grandmaster/1?access_token='),
            axios.get('https://us.api.blizzard.com/sc2/ladder/grandmaster/2?access_token=')
        ])
            .then(axios.spread((responseNA, responseKR) => {
                this.ladderTeams = responseNA.data.ladderTeams;
                this.ladderTeams = responseKR.data.ladderTeams;

                console.log(this.ladderTeams = responseNA.data.ladderTeams);
                console.log(this.ladderTeams = responseKR.data.ladderTeams);
            }))
    },
},

My HTML

<div class="content">
<div style="height:400px;overflow:auto;position:relative;top:40px;" class="table" id="app">
    <table>
        <tr>
            <th>Clan</th>
            <th>Player Name</th>
            <th>Race</th>
            <th>MMR</th>
        </tr>
        <tr v-for="(ladder, teamMembers, displayName, mmr) in ladderTeams">
            <td>{{ ladder.teamMembers[0].clanTag }}</td>
            <td>{{ ladder.teamMembers[0].displayName }}</td>
            <td>{{ ladder.teamMembers[0].favoriteRace }}</td>
            <td>{{ ladder.mmr }}</td>

        </tr>

        </tr>
    </table>
</div>

It does load all of the info from the second API just fine, but not the first - if I comment the second "this" code however - the first loads - so I know it works too, I am just obviously doing something wrong here.

Upvotes: 0

Views: 98

Answers (2)

Pushprajsinh Chudasama
Pushprajsinh Chudasama

Reputation: 7949

You can try this way.

const vm = new Vue({
el: '#app',
data: {
    ladderTeams: [],


},
mounted() {
    this.pullGMS();
},
methods: {

    async pullGMS() {

        axios.all([
            axios.get('https://us.api.blizzard.com/sc2/ladder/grandmaster/1?access_token='),
            axios.get('https://us.api.blizzard.com/sc2/ladder/grandmaster/2?access_token=')
        ])
            .then(axios.spread((responseNA, responseKR) => {
                this.ladderTeams.push(responseNA.data.ladderTeams);
                this.ladderTeams.push(responseKR.data.ladderTeams);

                console.log(this.ladderTeams)
            }))

     },
    }

Upvotes: 0

Arc
Arc

Reputation: 1078

You are assigning the arrays to the original variable and replacing them.

Offending Code:

this.ladderTeams = responseNA.data.ladderTeams;
this.ladderTeams = responseKR.data.ladderTeams;

Correct Code:

this.ladderTeams.push(responseNA.data.ladderTeams)
this.ladderTeams.push(responseKR.data.ladderTeams)

You are currently doing:

let myArray = []
myArray = [1, 2, 3]
myArray = [4, 5, 6]
console.log(myArray) //[4, 5, 6]

You need to use push to add to the array.

let myArray = []
myArray.push([1, 2, 3])
myArray.push([4, 5, 6])
console.log(myArray) //[[1, 2, 3], [4, 5, 6]])

Also, regarding axios.all, you should substitute with Promise.all, which is used under the hood. This Axios version may be deprecated or removed. https://github.com/axios/axios/issues/1042

Upvotes: 2

Related Questions