## はじめに
今回は、配列内の連想配列のデータを取得する方法を書きます。
こちらのドキュメントを参考にしました。
https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/JSON

## サンプルデータ
こちらが今回のサンプルデータになります。
GitHub APIから取得したJSONデータになります。
![img](/mosaic-code.jpg)
今回はこのデータの中の、"filename"というカラムのデータを取得してみましょう。
取得するためのJavaScriptのコードはこちらです。
![img](/mosaic-code.jpg)
こちらが実行結果です。
![スクリーンショット 2023-02-28 20.41.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/1c276bca-0a51-999a-e9f5-be54cf044aa5.png)
データが取得できました！
[cv:issue_marketplace_engineer]

## はじめに
今回は、配列内の連想配列のデータを取得する方法を書きます。
こちらのドキュメントを参考にしました。
https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/JSON

## サンプルデータ
こちらが今回のサンプルデータになります。
GitHub APIから取得したJSONデータになります。
```
"files": [
    {
      "sha": "aa8066a1fe98eb3f9436a30b4ff9c7300af8c0df",
      "filename": "13.java/src/index.html",
      "status": "modified",
      "additions": 0,
      "deletions": 1,
      "changes": 1,
      "blob_url": "https://github.com/hukuryo/hukuryo/blob/b6d6f503de6f1eeb340ac17e48f627e460d839cf/13.java%2Fsrc%2Findex.html",
      "raw_url": "https://github.com/hukuryo/hukuryo/raw/b6d6f503de6f1eeb340ac17e48f627e460d839cf/13.java%2Fsrc%2Findex.html",
      "contents_url": "https://api.github.com/repos/hukuryo/hukuryo/contents/13.java%2Fsrc%2Findex.html?ref=b6d6f503de6f1eeb340ac17e48f627e460d839cf",
      "patch": "@@ -8,6 +8,5 @@\n </head>\r\n <body>\r\n     <p>レビュー</p>\r\n-    <p>newレビュー</p>\r\n </body>\r\n </html>\r"
    }
  ]
```
今回はこのデータの中の、"filename"というカラムのデータを取得してみましょう。
取得するためのJavaScriptのコードはこちらです。
```
// データが格納されているエンドポイントのURLをfetchで取得する
fetch("https://api.github.com/repos/hukuryo/hukuryo/commits/b6d6f503de6f1eeb340ac17e48f627e460d839cf")
    .then( response => response.json())
    // 受け取ったJSONデータをdataという変数に格納
    .then( data => {
        // 配列の中の連想配列からデータを取り出す
        console.log(data.files[0]['filename'])
    });
```
こちらが実行結果です。
![スクリーンショット 2023-02-28 20.41.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/1c276bca-0a51-999a-e9f5-be54cf044aa5.png)
データが取得できました！

## あなたのスキルを最大限に活かしませんか？

[![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F6e18cf49-033c-4162-ad24-d8e17869b559?alt=media&token=cb77b97c-6da0-44a6-b917-e9a5173924e4)](https://i-ssue.com/engineer)

エンジニアとしてさらなる挑戦を求めているなら、次世代プラットフォーム **「ISSUE」** があなたのキャリアをサポートします。

- **登録プロジェクト数：豊富な選択肢**  
  多種多様なプロジェクトから、あなたに最適な案件を見つけられます。

- **スキルを評価し報酬アップも可能**  
  あなたの実績や専門性に基づいて高い報酬を得るチャンスがあります。

- **サポート体制も充実**  
  フリーランス初心者からベテランまで、プロジェクト運営を徹底的に支援。

---

### **ISSUEで実現できること**
1. **自分に合ったプロジェクトを選択可能**  
   あなたの得意分野やスキルを最大限に活かせるプロジェクトに参画できます。
2. **柔軟な働き方をサポート**  
   リモートワークやフレキシブルな契約条件で、ライフスタイルに合った働き方を実現。
3. **スキルアップの機会も多数**  
   最新技術やトレンドに触れるプロジェクトに参加し、キャリアを加速させましょう。

---

今すぐ「ISSUE」に登録して、あなたのキャリアを次のステージへ進めましょう！

➡️ [**詳細はこちらからご覧ください**](https://i-ssue.com/engineer)  

---

「ISSUE」で、あなたの可能性を広げるプロジェクトに出会えます。  
**成功事例も多数掲載中！**  
ぜひ詳細をチェックしてみてください。

➡️ [**今すぐチェックする**](https://i-ssue.com/engineer))