Vue.jsで、APIの返り値の連想配列から特定のキーの値を抜き出して描画したい。

#はじめに
文系出身1年目エンジニアです。
情報量の多いタイトルになってしまいましたが、APIでとってきた連想配列をクライアント側で成形して出したいということです。

#やりたいこと

①APIから以下のような連想配列が帰ってきました。血液型（bloodType）を抜き出して、画面に描画したいです。

```JSON:APIに渡された値
{id:1, name:"一郎", age:10}
{id:2, name:"二郎", age:10, bloodType="A"}
{id:3, name:"三郎", age:10, bloodType="B"}
{id:4, name:"四郎", age:10}
{id:5, name:"五郎", age:10, bloodType="AB"}
{id:6, name:"太郎", age:10, bloodType="AB"}
```

②`一郎`や`四郎`のように、血液型がわからない（連想配列の中にbloodTypeが無い）人は無視したいです。
③`五郎`と`太郎`のように、同じ血液型の人がいますが、描画は一回のみにしたいです。

#コード

```Vue:ListBloodType.vue
<template>
<div>
  <div>
      <li v-for="item in items">
          {{ item }}
      </li>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      items: []
    }
  },
  mounted() {
    var self = this
    axios
    .get('apiへのパス')
    .then(function(response){
      var array = response.data;
      for (var key in array) {
        var bloodtype = array[key].bloodType
        if(bloodtype && !self.items.includes(bloodtype)) {
          self.items.push(bloodtype)
        }
      }
    })
  }
}
</script>

<style>

</style>
```

#解説

以下の2つに分けて解説します。

- HTML部分（`template`タグ内）
- JavaScript部分（`script`タグ内）

##HTML部分

基本的なv-forの書き方です。
公式のドキュメントがわかりやすいので、Vue.jsについて詳しくない方は、先に以下のリンクをご参照ください。
[**v-forで配列に要素をマッピングする**](https://jp.vuejs.org/v2/guide/list.html#v-for-%E3%81%A7%E9%85%8D%E5%88%97%E3%81%AB%E8%A6%81%E7%B4%A0%E3%82%92%E3%83%9E%E3%83%83%E3%83%94%E3%83%B3%E3%82%B0%E3%81%99%E3%82%8B)

```Vue:ListBloodType.vue
<template>
<div>
  <div>
      <li v-for="item in items">
          {{ item }}
      </li>
  </div>
</template>
```

##JavaScript部分

###血液型を抜き出したあとに格納する箱をつくる
`items: []`に、APIから取得し、成形した値を入れるようにします。

```Javascript:ListBloodType.vue

export default {
  data() {
    return {
      items: []
    }
  },
```

###血液型を抜き出す

まずは、axiosをインポートします。
これ最初読めませんでした。アクシオスって読むみたいです。読めなかった方、仲間です。

```Javascript:ListBloodType.vue
import axios from 'axios'
```

以下が返ってきた連想配列を成形している部分です。

```Javascript:ListBloodType.vue
  mounted() {
    var self = this
    axios
    .get('apiへのパス')
    .then(function(response){
      var array = response.data;
      for (var key in array) {
        var bloodtype = array[key].bloodType
        if(bloodtype && !self.items.includes(bloodtype)) {
          self.items.push(bloodtype)
        }
      }
    })
  }
```

以下の部分で、
①for文で回しながら
②bloodtypeの値があるか調べて
③かつ、itemsにすでに同じ値が入っていないか調べて
④itemsにpushしています。

```Javascript:ListBloodType.vue
　      var array = response.data;
①      for (var key in array) {
　        var bloodtype = array[key].bloodType
②③      if(bloodtype && !self.items.includes(bloodtype)) {
④          self.items.push(bloodtype)
　        }
　      }
```

#ポイント
私がつまずいた部分です。

##bloodtypeだけ抜き出す
こちらを参考にさせていただきました。
[**連想配列の中の連想配列でkeyとvalueを取り出す方法**](https://qiita.com/tana117/items/81e28bc0f0cd05e6b256)

##itemsにpushする
当初、`self.items.push(bloodtype)`を`this.items.push(bloodtype)`にしていました。
しかし、**this**にしてしまうと、結果はundefinedになってしまいます。
なぜなら`items`は外のオブジェクトだからです（あってますか？）

そこで、axiosを利用する前に`var self = this`と宣言してあげて、`self.items.push(bloodtype)`と記述すると、無事`items`に届きました。

#まとめ

いかがでしたでしょうか。
オブジェクト思考が身についていないことがバレバレでお恥ずかしい限りですが、長い時間つまずいてしまっていたので、メモがてらQiitaに残しておきます。