【发布时间】:2021-07-28 01:07:22
【问题描述】:
我想合并从 API 调用中收到的两个对象数组(https://developers.themoviedb.org/3/getting-started/introduction 这个)。
我在methods 中创建了这个简单的函数来合并Vue 中的两个数组,但是每次我得到一个空数组时
mergeArrays(arr1, arr2) {
let arrMerged = [...arr1, ...arr2];
return arrMerged;
}
所以,我认为问题可能出在异步调用上。所以,为了确保数组在返回之前被填充,我放了这个 if 语句,但我什么也没得到,函数没有启动。
mergeArrays(arr1, arr2) {
if (arr1.length == 19 && arr2.length == 16 ) {
let arrMerged = [...arr1, ...arr2];
return arrMerged;
}
}
数组是这样获得的:
mounted () {
// First Array
// Obtaine movies genres and put them in an re-usable array
axios
.get(`https://api.themoviedb.org/3/genre/movie/list`, {
params: {
api_key: this.apiKey,
language: this.userLanguage,
},
})
.then((response) => {
const genres = response.data.genres;
genres.forEach(element => {
let genreId = element.id;
let genreName = element.name;
this.genresMovies.push(
{
id: genreId,
name: genreName
}
);
});
})
// Second Array
// Obtaine tv genres and put them in an re-usable array
axios
.get(` https://api.themoviedb.org/3/genre/tv/list`, {
params: {
api_key: this.apiKey,
language: this.userLanguage,
},
})
.then((response) => {
const genres = response.data.genres;
genres.forEach(element => {
let genreObj = element;
let genreId = element.id;
let genreName = element.name;
this.genresTV.push(
{
id: genreId,
name: genreName
}
);
});
})
this.genresTV 和this.genresMovies 是在data 中定义的空数组,并在此处填充。
填满后,它们会以这种方式显示:
Array 1
0:
id: 28
name: "Azione"
1:
id: 12
name: "Avventura"
2:
id: 16
name: "Animazione"
3:
id: 35
name: "Commedia"
4:
id: 80
name: "Crime"
5:
id: 99
name: "Documentario"
6:
id: 18
name: "Dramma"
7:
id: 10751
name: "Famiglia"
8:
id: 14
name: "Fantasy"
9:
id: 36
name: "Storia"
10:
id: 27
name: "Horror"
11:
id: 10402
name: "Musica"
12:
id: 9648
name: "Mistero"
13:
id: 10749
name: "Romance"
14:
id: 878
name: "Fantascienza"
15:
id: 10770
name: "televisione film"
16:
id: 53
name: "Thriller"
17:
id: 10752
name: "Guerra"
18:
id: 37
name: "Western"
Array 2
0:
id: 10759
name: "Action & Adventure"
1:
id: 16
name: "Animazione"
2:
id: 35
name: "Commedia"
3:
id: 80
name: "Crime"
4:
id: 99
name: "Documentario"
5:
id: 18
name: "Dramma"
6:
id: 10751
name: "Famiglia"
7:
id: 10762
name: "Kids"
8:
id: 9648
name: "Mistero"
9:
id: 10763
name: "News"
10:
id: 10764
name: "Reality"
11:
id: 10765
name: "Sci-Fi & Fantasy"
12:
id: 10766
name: "Soap"
13:
id: 10767
name: "Talk"
14:
id: 10768
name: "War & Politics"
15:
id: 37
name: "Western"
我在第二个 axios 之后以这种方式调用该函数
const arr = this.mergeArrays(this.genresMovies, this.genresTV);
我不知道怎么了
【问题讨论】:
-
尝试更简单的东西:
this.mergeArrays([1,2,3], [4,5,6]); -
并检查它是否正常工作,如果是,问题出在其他地方,否则你可能有某种损坏的 SDK,因为它应该可以工作
-
请提供更多代码来重现此内容。见minimal reproducible example
-
了解如何使用 Promise 和 async/await。您的问题是,在合并数组时,数组是空的,并且没有被 XHR 响应填充。
-
问题是您在填充数组之前合并数组。使用 Vue,您甚至无需担心这一点。您可以使用计算属性:
computed: { mergedArray() { return [...this.arr1, ...this.arr2] }},然后您所要做的就是填充原始数组。计算将自动更新。看到它工作here。我还添加了一个基于id删除重复项的计算,因为您可能会想要它。
标签: javascript arrays vue.js object