前回の続きです。Object.values()・Object.keys()・Object.entries()で中身のデータを取り出していきます。
Object.values()
まずは、Object.values()でデータを取得してみます。データは前回と同じ下記のようなデータをFetchAPIで取得した結果です。
![](https://eguweb.jp/wp-content/uploads/202211130003-01.jpg)
Object.values() メソッドは、指定されたオブジェクトが持つ列挙可能なプロパティの値を、 for…in ループで提供される場合と同じ順序で配列にして返します。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/values
const objArray = Object.values(data);
console.log("objArray",objArray);
下記のような結果が取得できました。
![](https://eguweb.jp/wp-content/uploads/202211130007-00.jpg)
const objArray = Object.values(data[0]);
console.log("objArray",objArray);
下記のような結果が取得できました。
![](https://eguweb.jp/wp-content/uploads/202211130003-00.jpg)
配列で指定することで、中身がすべて取得できているようです。
Object.keys()
Object.keys() メソッドは、指定されたオブジェクトが持つプロパティの 名前の配列を、通常のループで取得するのと同じ順序で返します。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
const objArray = Object.keys(data);
console.log("objArray",objArray);
![](https://eguweb.jp/wp-content/uploads/202211130021-00.jpg)
const objArray = Object.keys(data[0]);
console.log("objArray",objArray);
配列0番目とすると、スプレッドシートの1行目のデータが入っています。
![](https://eguweb.jp/wp-content/uploads/202211130028-00.jpg)
Object.entries()
Object.entries() メソッドは、引数に与えたオブジェクトが所有する、文字列をキーとした列挙可能なプロパティの組 [key, value] からなる配列を返します。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/entries
const objArray = Object.entries(data);
console.log("objArray",objArray);
![](https://eguweb.jp/wp-content/uploads/202211130047-01-689x1024.jpg)
const objArray = Object.entries(data[0]);
console.log("objArray",objArray);
配列で指定するとこのようになりました。
![](https://eguweb.jp/wp-content/uploads/202211130048-00.jpg)
1行目と2行目が取れているようです。
![](https://eguweb.jp/wp-content/uploads/202211130048-01.jpg)
まとめ
Object.values()・Object.keys()・Object.entries()の3種類でFETCH APIからデータを取り出すことが出来るようになっています。
御参考ください。