react nativeでfirestoreから取得したドキュメントをkeyとlabelに変換

Question

実装したいこと

const colors = db.colorsCollection.get()
  .then(snapshot => {
    snapshot.forEach((doc) => {
      console.log(doc.data());
      console.log(doc.id);
    })
  });

上記のコードでカラーコレクションのドキュメントを取得しています。
conosle.log()の結果は

Object {
  "name": "赤",
}
1
Object {
  "name": "白",
}
2
Object {
  "name": "黒",
}
3
Object {
  "name": "青",
}
4

となります。

この取得結果を

[
  { key: 1, label: '赤' },
  { key: 2, label: '白' },
  { key: 3, label: '黒' },
  { key: 4, label: '青' },
];

に変換したいです。
ご教示いただけると幸いです:)

Answer 1

まずforEach()を使っていることから既に配列を取得していることがわかりますね？そしてほしいものも配列です。配列から配列への変換へはmap()を利用すると便利です。
Array.prototype.map() - JavaScript | MDN
配列各々の要素に対して{ key: doc.id , value: doc.data().name }が返ってくるようにコールバック関数をわたしてあげればOKです。

Comments

[sheckwes]

ご回答いただきありがとうございます。
forEach()の中でmap()を使うんですかね。
あまり理解できていなくて:(
ご教示いただけると幸いです。

[A_kirisaki]

`forEach()`の「代わり」に`map()`です。この2つの関数の違いは戻り値があるかないかだけです。`forEach()`は中の関数で実行した結果（例であれば`console.log()`の結果）を捨てています。表示されているから捨ててないじゃないか、と思うかもしれませんが関数的には何も（実際は`undefined`という値）返ってきていません。表示されている結果は難しい言葉で「副作用」と呼び、関数の戻り値としては何も返ってきていないのです。

`map()`関数は中の関数で戻り値が発生した場合それを拾い集めて配列にして返します。例えばこんな感じです。
```js
xs = [1, 2, 3]

xs.map(x => x *2) // [2,4,6]
```
配列から`1`、`2`、`3`が次々渡され、関数の中で2倍されて返され、それが拾い集められて`[2 , 4, 6]`を作ります。同じように`data()`と`id`の入ったオブジェクトが次々渡されそれを関数の中で`{ key: doc.id , value: doc.data().name }`のかたちに組み立てそれを返してやれば望む配列を得られる、といったことになります。