JSのオブジェクト型のデータを配列に変換してfilter関数を使って欲しい情報のみを抽出する

案件でAPIから受けとったオブジェクト型のデータの重複を取り除いたり欲しい情報のみを抽出するといったことをしました。
結構詰まったのでメモです。

```javascript
<script>
export default {
  data() {
    return {
      obj: {
        '1': { id: 1, name: 'javascript' },
        '2': { id: 2, name: 'vue.js'},
        '3': { id: 3, name: 'react'},
        '4': { id: 4, name: 'angular'},
        '5': { id: 5, name: 'vue.js'},
        '6': { id: 6, name: 'angular'},
        '7': { id: 7, name: 'vue.js'}
      }
    }
  },
}
```

このようなデータがあります。
これを表示させるとこんな感じになります。

```html
<div>
  <div v-for="(js, index) in obj" :key="index">
    {{ index }} {{ js.name }}
  </div>
</div>
```
![スクリーンショット 2020-07-05 20.29.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/518141/2f24a93f-f0ec-07a8-4cd6-054a41836283.png)
まあまあ普通にv-forで表示させただけのシンプルな文です。

### nameが"vue.js"のものだけを表示させる
このデータの"name"が"vue.js"のもののみを抽出させたいと思います。

```javascript
<template>
  <div>
    <div v-for="(js, index) in objInArray" :key="index">
      {{ index }} {{ js.name }}
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      obj: {
        '1': { id: 1, name: 'javascript' },
        '2': { id: 2, name: 'vue.js'},
        '3': { id: 3, name: 'react'},
        '4': { id: 4, name: 'angular'},
        '5': { id: 5, name: 'vue.js'},
        '6': { id: 6, name: 'angular'},
        '7': { id: 7, name: 'vue.js'}
      }
    }
  },
  computed: {
    objInArray () {
      this.objectOperation()
      return this.obj
    }
  },
  methods: {
    objectOperation() {
      const obj = this.obj
      const result = obj.filter((value) => {
        return value.name === 'vue.js'
      })
      this.obj = result
    }		
  },
}
```
しかしこれはエラーが起きてしまいます。
filter関数を使用しているところが配列ではないためです。
そこで```Object.entries()```の出番です。

```javascript

  computed: {
    objInArray () {
      this.objectOperation()
      return this.obj
    }
  },
  methods: {
    objectOperation() {
      const arr = Object.entries(this.obj)
      console.log(arr)
      const result = arr.filter(([id, value]) => {
        console.log(id)
        return value.name === 'vue.js'
      })
      this.obj = result
    }		
  }
```

1行づつ説明していくと、```Object.entries(this.obj)```でオブジェクト型を配列形式に変換しています。
![スクリーンショット 2020-07-05 20.52.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/518141/06fc6ef3-bff8-d42c-ebda-225f596190e2.png)

`arr`の中はこのような感じになっています。１つの配列に７つの配列が格納されているのがわかるかと思います。
このような形にすることでfilter関数やらfind関数やらが使えるようになります。
そして先ほど配列形式に変換した`arr`をfilter関数を使用して`value.name`が`vue.js`の物のみを抽出しています。

filter関数の引数`arr.filter([id, value])`は配列の添字を指しており、これを記述することでid番目のvalueといったように直接指定することができます。
最後に`obj`をうわがいてこのスクリプトは終了です。

```html

<template>
  <div>
    <div v-for="(js, index) in objInArray" :key="index">
      {{ index }} {{ js[1].name }}
    </div>
  </div>
</template>
```

上記のようにHTMLを書いてあげると下記の添付画像のように`vue.js`のみが抽出されました。
![スクリーンショット 2020-07-05 21.07.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/518141/245322d9-658c-003b-f7f6-d1a522bb7c83.png)

`{{ js[1].name }}`の`[1]`は何かどこから来たのかというと
![スクリーンショット 2020-07-05 21.09.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/518141/bde43f8b-46a9-c093-0759-87ed7edf44d3.png)
先ほどのスクリプトで上の画像のような形で配列を受け取ります。
`obj`という配列を一件ずつ回して表示させています。
HTML上で`vue.js`と表示させるには`obj`の中に複数ある配列の中の`1: Object`の中に`name: vue.js`があるため`{{ js[1].name }}`と書いてあげることで添字を直接指定して表示させています。