fetch(url)で中身を取り出す（Object.values()・Object.keys()・Object.entries()）

前回の続きです。Object.values()・Object.keys()・Object.entries()で中身のデータを取り出していきます。

Object.values()

まずは、Object.values()でデータを取得してみます。データは前回と同じ下記のようなデータをFetchAPIで取得した結果です。

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);

下記のような結果が取得できました。

const objArray = Object.values(data[0]);
console.log("objArray",objArray);

下記のような結果が取得できました。

配列で指定することで、中身がすべて取得できているようです。

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);

const objArray = Object.keys(data[0]);
console.log("objArray",objArray);

配列0番目とすると、スプレッドシートの1行目のデータが入っています。

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);

const objArray = Object.entries(data[0]);
console.log("objArray",objArray);

配列で指定するとこのようになりました。

1行目と2行目が取れているようです。

まとめ

Object.values()・Object.keys()・Object.entries()の３種類でFETCH APIからデータを取り出すことが出来るようになっています。

御参考ください。