javascript - 使用 Vuejs 中的 Api 响应映射 Json 文件

Question

我目前正在从 themoviedb.com API 获取数据。但我发现该请求不包括每部电影的特定类型。我创建了一个单独的 json 文件，其中包含我需要的所有类型。有没有办法可以将generators.json 文件中的数据映射到远程API 请求？

{
  "genres": [
    {
      "id": 28,
      "name": "Action"
    },
    {
      "id": 12,
      "name": "Adventure"
    },
    {
      "id": 16,
      "name": "Animation"
    },
    {
      "id": 35,
      "name": "Comedy"
    },
    {
      "id": 80,
      "name": "Crime"
    },
    {
      "id": 99,
      "name": "Documentary"
    },
    {
      "id": 18,
      "name": "Drama"
    },
    {
      "id": 10751,
      "name": "Family"
    },
    {
      "id": 14,
      "name": "Fantasy"
    },
    {
      "id": 36,
      "name": "History"
    },
    {
      "id": 27,
      "name": "Horror"
    },
    {
      "id": 10402,
      "name": "Music"
    },
    {
      "id": 9648,
      "name": "Mystery"
    }
  ]
}

Answer 1

您可以这样做。

基本上，使用 Vue，您需要创建一个计算值来映射电影 API 的响应，并将类型信息添加到响应中。

console.clear()
const genres = [
    {
      "id": 28,
      "name": "Action"
    },
    {
      "id": 12,
      "name": "Adventure"
    },
    {
      "id": 16,
      "name": "Animation"
    },
    {
      "id": 35,
      "name": "Comedy"
    },
    {
      "id": 80,
      "name": "Crime"
    },
    {
      "id": 99,
      "name": "Documentary"
    },
    {
      "id": 18,
      "name": "Drama"
    },
    {
      "id": 10751,
      "name": "Family"
    },
    {
      "id": 14,
      "name": "Fantasy"
    },
    {
      "id": 36,
      "name": "History"
    },
    {
      "id": 27,
      "name": "Horror"
    },
    {
      "id": 10402,
      "name": "Music"
    },
    {
      "id": 9648,
      "name": "Mystery"
    }
  ]

new Vue({
  el: "#app",
  data:{
    genres,
    movies: null
  },
  computed:{
    moviesWithGenre(){
      // if the movies haven't been populated from the AJAX response yet
      // return an empty array
      if (!this.movies) return []
      
      return this.movies.map(movie => {
        return {
          // add all the existing movie properties
          ...movie,
          // add the genres
          genres: movie.genre_ids
                    // remove the genres we don't know
                    .filter(id => this.genres.map(g => g.id).includes(id))
                    // get the name
                    .map(id => this.genres.find(g => g.id === id).name)
        }
      })
    }
  },
  created(){
    var url = "https://api.themoviedb.org/3/movie/popular?api_key=8e3003c0c81633dc53b9d15ffa3399e1&language=en-US&page=1"
    axios.get(url)
      .then(response => this.movies = response.data.results)
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
<div id="app">
  <ul>
    <li v-for="movie in moviesWithGenre">
      {{movie.original_title}}
      <ul>
        <li v-for="g in movie.genres">{{g}}</li>
      </ul>
    </li>
  </ul>
</div>