JSONで取得した値の表示について教えてください。

こんばんは。

現在、コインチェックという仮想通貨販売所のAPIを利用して、通貨の価格を表示させたいと考えております。

まずは api.php というファイルを作成して下記のように API を利用してデータを取得しました。

php
1<?php
2
3$url = [
4  "https://coincheck.com/api/rate/btc_jpy",
5  "https://coincheck.com/api/rate/eth_jpy",
6  "https://coincheck.com/api/rate/etc_jpy",
7  "https://coincheck.com/api/rate/dao_jpy",
8  "https://coincheck.com/api/rate/lsk_jpy",
9  "https://coincheck.com/api/rate/fct_jpy",
10  "https://coincheck.com/api/rate/xmr_jpy",
11  "https://coincheck.com/api/rate/rep_jpy",
12  "https://coincheck.com/api/rate/xrp_jpy",
13  "https://coincheck.com/api/rate/zec_jpy",
14  "https://coincheck.com/api/rate/xem_jpy",
15  "https://coincheck.com/api/rate/ltc_jpy",
16  "https://coincheck.com/api/rate/dash_jpy",
17  "https://coincheck.com/api/rate/bch_jpy"
18];
19
20$result = [];
21
22foreach ($url as $value){
23
24  $conn = curl_init(); // cURLセッションの初期化
25  curl_setopt($conn, CURLOPT_URL, $value); //　取得するURLを指定
26  curl_setopt($conn, CURLOPT_RETURNTRANSFER, true); // 実行結果を文字列で返す。
27  $result[] = curl_exec($conn);
28  curl_close($conn); //セッションの終了
29
30}
31
32echo json_encode($result, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT);

次に下記のファイルを作成して jQuery と ajax を利用して、とりあえず console.log で最初の通貨の価格を表示しようと下記のように記述しました。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<meta name="robots" content="noindex">
6<meta name="viewport" content="width=device-width, initial-scale=1.0">
7<meta http-equiv="X-UA-Compatible" content="ie=edge">
8<title>API TEST</title>
9<script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>
10<script type="text/javascript">
11$(function(){
12
13    $.ajax({
14      url: "api.php",
15      dataType: "json"
16    }).done(function(data, status, xhr) {
17
18        // これだと {"rate":"816180.0"} と表示される
19        console.log(data['0']);
20
21        // これだと undefined になる
22        console.log(data['0'].rate);
23
24    }).fail(function(xhr, status, error) {
25
26    }).always(function(arg1, status, arg2) {
27
28    });
29
30});
31</script>
32</head>
33<body>
34</body>
35</html>