Vuejs API indented – Filmywap Online

I’m trying to display some information from RAWG.io API (https://api.rawg.io/api/games) but some of them are indented so the output is not what I want (for example in game genres). My code is

<template>
  <div>
    <v-container fluid v-if="game !== null">
      <v-row class="frist">
        <v-col class="title">
          <h1>{{game.name}}</h1>
        </v-col>
        <v-col class="info">
          <p>{{game.genres}}</p>
        </<-col>
      </v-row>
  </div>
</template>

<script>
import Vue from "vue";
import axios from "axios";
import VueAxios from "vue-axios";
Vue.use(VueAxios, axios);
export default {
  name: "game",
  data() {
    return {
      gameId: this.$route.params.gameId,
      title: "game",
      game: null
    };
  },
  mounted() {
    Vue.axios
      .get("https://api.rawg.io/api/games/" + this.gameId)
      .then(resp => {
        this.game = resp.data;
        console.log(resp.data);

        console.warn(resp.data.results);
      })
      .catch(error => {
        console.log(error);
      });
  }
};
</script>

{{game.genres}} returns:

[
  {
    "id": 4,
    "name": "Action",
    "slug": "action",
    "games_count": 93639,
    "image_background": "https://media.rawg.io/media/games/84d/84da2ac3fdfc6507807a1808595afb12.jpg"
  },
  {
    "id": 3,
    "name": "Adventure",
    "slug": "adventure",
    "games_count": 64820,
    "image_background": "https://media.rawg.io/media/games/4be/4be6a6ad0364751a96229c56bf69be59.jpg"
  }
]

How do I display only “name” in the genres attribute?

Answer

A simple approach would be to use a mapped, computed property:

<!-- ... -->
        <v-col class="info">
          <p>{{genreNames}}</p>
        </v-col>
<!-- ... -->
<script>
// ... just posting the important parts
export default {
  // ...
  computed: {
    genreNames() {
      return this.game.genres.map(({ name }) => name).join(' ') // join the names with a space
    }
  }
}
</script>