时间戳

首页 > 解决方案 > For-in cicle 仅返回 array.push 中的最后一个结果

javascript - For-in cicle 仅返回 array.push 中的最后一个结果

问题描述

我使用 Vue.js 2，并且我有一个从 API（https://developers.themoviedb.org/3/getting-started/introduction这个）获取的对象数组，该 API 链接到一个变量，即 v-model的输入。因此，每当变量更改时，数组也会随着@keyup 时调用 API 的函数而更改。该数组是关于电影和电视节目的。它有这样的结构：

(20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, __ob__: we]
0:
backdrop_path: (...)
first_air_date: (...)
genre_ids: Array(3)
0: 18
1: 80
2: 9648
length: 3
__ob__: we {value: Array(3), dep: ce, vmCount: 0}
__proto__: Array
genres_name: ["Mistero"]
id: (...)
media_type: (...)
name: (...)
origin_country: (...)
original_language: (...)
original_name: (...)
overview: (...)
popularity: (...)
poster_path: (...)
vote_average: (...)
vote_count: (...)

这个数组为我提供了有关电影和电视剧的有用信息，但它并没有给我返回类型，至少不是这些的名称，而是与它们相关的 id 在 key 中genre_ids: Array(3)。现在，我调用了另一个 API，它提供了这样的流派列表：

(19) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0:
id: 28
name: "Azione"
__proto__: Object
1:
id: 12
name: "Avventura"
__proto__: Object
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"}
length: 19
__proto__: Array(0)

我想要的是比较两个数组的 id 并将流派列表的流派名称传递给每个对象的第一个数组，所以我这样做了

const newArray = this.searchResults.map ((element) => {
                        let objectResults = element.genre_ids;
                        console.log('objectResults', objectResults);
                        let object = element;
                        console.log('single-object', object);

                        this.genresName.forEach(genre => {
                            if (objectResults.includes(genre.id) ) {
                                object.genres_name = [];
                                for(var key in genre) {
                                    if (key == 'name') {
                                        console.log('key', genre[key]);
                                        let keyName = '';
                                        keyName = keyName + genre[key];
                                        object.genres_name.push(keyName);
                                    }
                                }
                            }
                        })
                        console.log(this.searchResults);

我的问题是我可以正确读取每个节目的每个流派的名称，因此 id 比较有效，但是当将它们推送到第一个数组的每个元素时，只有最后一个被推送并且只有一个。大多数节目应该有不止一种类型，因为它们有不止一个 id in genre_ids: Array，但我只能获得其中一个，而且总是最后一个

标签： javascriptarraysvue.jsobjectfor-in-loop

解决方案

也许有一种更漂亮的方法可以做到这一点，但这很有效。这将在 movies 数组中创建一个名为 的新数组genreNames，其中将包含相应的流派名称。

const genres = [
  { id: 12, name: "Avventura" },
  { id: 16, name: "Animazione" },
  { id: 35, name: "Commedia" },
  { id: 80, name: "Crime" },
  { id: 99, name: "Documentario" },
  { id: 18, name: "Dramma" },
];

const movies = [
  { genre_ids: [12, 16], name: "Movie 1" },
  { genre_ids: [80, 99], name: "Movie 2" },
  { genre_ids: [18, 12, 99], name: "Movie 3" },
];

// our final result
let finalArray = [];
movies.map(element => {
  // create a temp array for the genres
  let genreNames = []
  element.genre_ids.map(genre => {
    // each genreid from the movie, find the corresponding name from the genres array
    genreNames.push(genres.find(val => val.id === genre).name)
  })
  // finally push the original movie and the newly create array for the names
  finalArray.push({ ...element, genreNames })
})
console.log(finalArray);

推荐阅读