Javascript 使用相同的数组路径组合多个API

使用VUE和Axios，我试图从暴雪API服务器获取数据——我想从不同的游戏区域获取数据。我使用的代码从两个区域加载数据，但只在表中放置一组数据

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

我的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>

宗派
球员姓名
比赛
嗯
{{ladder.teamMembers[0].clandag}
{{ladder.teamMembers[0].displayName}
{{ladder.teamMembers[0].favoriteRace}
{{ladder.mmr}}

它确实可以加载第二个API中的所有信息，但不是第一个——如果我对第二个“this”代码进行注释的话——第一个加载——因此我知道它也可以工作，我只是在这里明显做错了什么。

您可以尝试这种方法

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

     },
    }

你可以这样试试

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

     },
    }

---

将数组分配给原始变量并替换它们

违规代码：

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

正确代码：

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

您目前正在做：

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

您需要使用

push

添加到数组中

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

另外，关于

axios.all

，您应该用发动机罩下使用的

Promise.all

替换。此Axios版本可能已被弃用或删除。

---

将数组分配给原始变量并替换它们

违规代码：

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

正确代码：

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

您目前正在做：

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

您需要使用

push

添加到数组中

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

另外，关于

axios.all

，您应该用发动机罩下使用的

Promise.all

替换。此Axios版本可能已被弃用或删除。

---

试试这个<代码>变量x={}；x、 a=1；x、 a=2；控制台日志（x.a）-他只输出了

2

，这是否让您感到惊讶？如果没有，那么您应该能够立即看到问题是

响应？？？.data.ladderTeam

数组？如果是的话<代码>this.ladderTeams=[…responseNA.data.ladderTeams，…responseKR.data.ladderTeams]将修复您的问题-否则

this.ladderTeams=Object.assign（{}，responseNA.data.ladderTeams，responseKR.data.ladderTeams）可以执行以下操作：trick@JaromandaX-这并不让我感到惊讶，当你这样定位它时，它是有意义的。谢谢你的帮助：）试试这个<代码>变量x={}；x、 a=1；x、 a=2；控制台日志（x.a）-他只输出了
2
，这是否让您感到惊讶？如果没有，那么您应该能够立即看到问题是
响应？？？.data.ladderTeam
数组？如果是的话<代码>this.ladderTeams=[…responseNA.data.ladderTeams，…responseKR.data.ladderTeams]

将修复您的问题-否则

this.ladderTeams=Object.assign（{}，responseNA.data.ladderTeams，responseKR.data.ladderTeams）可以执行以下操作：trick@JaromandaX-这并不让我感到惊讶，当你这样定位它时，它是有意义的。谢谢你的帮助：）谢谢。你这样解释很明显，但我还在学习。这确实奏效了，我换成了Promise。所有的一切都很好，但它确实打破了我的v-for表。我可以加载数据，但它只加载初始数组-{ladder.LadderTeam[0].teamMembers[0].displayName}}实际上只是从每个数组中提取第一个名称，而不是列出所有名称的完整列表。这是因为您的v-for引用的是数组，它是一个数组。你最好现在在LadderTeam[0]中做一个v-for x，然后在[1]中做另一个v-for x。当您对一般的编码更熟悉时，您实际上可以将它们合并到一个v-for中，但现在就可以这样做了。谢谢。你这样解释很明显，但我还在学习。这确实奏效了，我换成了Promise。所有的一切都很好，但它确实打破了我的v-for表。我可以加载数据，但它只加载初始数组-{ladder.LadderTeam[0].teamMembers[0].displayName}}实际上只是从每个数组中提取第一个名称，而不是列出所有名称的完整列表。这是因为您的v-for引用的是数组，它是一个数组。你最好现在在LadderTeam[0]中做一个v-for x，然后在[1]中做另一个v-for x。一般来说，当您对编码更为熟悉时，实际上可以将它们组合成一个v-for，但现在可以这样做。