【问题标题】:Can't merge two array of object [duplicate]无法合并两个对象数组[重复]
【发布时间】: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.genresTVthis.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


【解决方案1】:

这应该可行:

const arr = this.genresMovies.concat(this.genresTV);

【讨论】:

  • 感谢您的帮助,但它不起作用
  • 好的,但是在那个时候,你想合并它们,它们不是空的还是?
  • 如果我在函数调用之前执行 console.log,它们已经满了
  • 如果你把 console.log(this.genresMovies) 直接放在合并命令之前?
  • 是的,但是就像上面的cmets所说的,只是学习如何处理异步调用的问题
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2020-05-20
  • 1970-01-01
  • 1970-01-01
  • 2021-03-08
  • 2018-05-24
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多