ajaxでjson形式のデータをGETし画面へ表示したい

Question

json generatorにて生成したデータをhttpのGETメソッドにて取得し画面へ表示させるサンプルを作成しております（実現性検証）。当方、製造の経験もなく試行錯誤しながら検証を行っておりますがいよいよ行き詰ったためご相談いたします。

やりたいこと

ボタンをクリックした際に、指定したjson形式のデータを取得し画面に表示したい

参考にしたサイトjQuery $.ajaxで通信を行ってJSONを取得するサンプル

現状

通信の確認はできたが、データの取得・表示（コメント//3.~5.が実現できない）
・data1の変数宣言がないので宣言するべき？どこで？

例...friendsの1番目のname　など、、、
※下図のデータ内容参照

コード

   //ajaxTest
        $(function () {
            $('#btn1').click(
                function () {
                    $("out6").html("ajaxにてデータ取得します");
                

                //1.$.ajaxメソッドで通信を行う
                // dataでは、フォームの内容をserialize()している
                // →serialize()の内容は、cs1=custom1&cs2=custom2
                $.ajax({
                    url: 'http://www.json-generator.com/api/json/get/cfzfHNIVki?indent=2',
                    type: 'GET',
                    datatype: 'json',
                    //2. doneは通信に成功したときに実行される処理
                    //引数のdata1は通信で取得したデータ
                    //引数のtextstatusは通信結果のステータス
                    //引数のjqzXHRは、XMLHttpRequestオブジェクト
                }).done(function (data1, textStatus, jqXHR) {
                    $("#out1").html(jqXHR.status);
                    $("#out2").html(textStatus);

                    //3. キーを指定して値を表示
                    $("#out4").html(data1["age"]);

                    //4.オブジェクトをjson形式の文字列に変換
                    var data2 = JSON.stringify(data1);
                    console.log(data2);//コンソールへjson形式で表示

                    //5.json形式の文字列をオブジェクトにし、キーを指定して値を表示
                    //キーを指定して値(/www.json-generator.com/api/json/)を表示
                    var data3 = JSON.parse(data2);
                    $("#out5").html(data3["friends[0]"],["name"]);

                    //6. failは、通信に失敗したときに実行される
                }).fail(function (jqXHR, textStatus, errorThrown) {
                    $("#out1").html(jqXHR.status); //jqXHR.statusを表示
                    $("#out2").html(textStatus);   //textStatusを表示
                    $("#out3").html(errorThrown);  //errorThrownを表示

                    //7. always は　成功、失敗に関わらず実行

                    }).always(function (){
                        $("#out6").html("complete"); //表示3

            });

        });
        });

<p>jqXHR.statusを表示:<span id="out1"></span></p>
<p>textStatusを表示:<span id="out2"></span></p>
<p>errorThrownを表示:<span id="out3"></span></p>
<p>表示１(out4):<span id="out4"></span></p>
<p>表示２(out5):<span id="out5"></span></p>
<p>表示３(out6):<span id="out6"></span></p>

<div class="tab-pane" id="sampleContentC">
            <p>ATC送信架No.3の内容</p>
            <p>ボタンを押すと通信が始まります</p>

            <form id="form1">
                <input type="button" id="btn1" value="ボタン1"><br />
                テキストボックス１<br />
                <input type="text" name="cs1" value="custom1" maxlength="10"><br />
                テキストボックス２<br />
                <input type="text" name="cs2" value="custom2" maxlength="10">
            </form>
        </div>

ご教授願います。
console.log(data1)を追加し、実行した際のキャプチャ

サンプルjson(一部抜粋）

[
  {
    "_id": "5b0b4f0cbd378d1875f3f77e",
    "index": 0,
    "guid": "493476ca-aeac-47d0-bc92-0f68ed69a450",
    "isActive": false,
    "balance": "$1,357.46",
    "picture": "http://placehold.it/32x32",
    "age": 26,
    "eyeColor": "brown",
    "name": "Rowland Baird",
    "gender": "male",
    "company": "GEEKMOSIS",
    "email": "[e-mail]",
    "phone": "[phone]",
    "address": "763 Aurelia Court, Woodruff, Palau, 9489",
    "about": "Ullamco anim sit dolore enim nostrud in sunt deserunt consequat anim ut. Eiusmod eu incididunt ut consectetur. Non laborum reprehenderit pariatur eu commodo ad excepteur quis aliquip exercitation proident in.\r\n",
    "registered": "2017-09-04T10:00:50 -09:00",
    "latitude": 4.862184,
    "longitude": -106.437544,
    "tags": [
      "incididunt",
      "tempor",
      "sint",
      "amet",
      "consequat",
      "mollit",
      "aute"
    ],
    "friends": [
      {
        "id": 0,
        "name": "Weiss Dale"
      },
      {
        "id": 1,
        "name": "Kristen Hardin"
      },
      {
        "id": 2,
        "name": "Stewart Foley"
      }
    ],

Comments

[m.ts10806]

data1をconsole.log()で出力した結果をご提示ください。

[退会済みユーザー]

あなたの開発環境（OS, .NET, IIS, MVC, Visual Stusio のバージョンなど）を書いてください。

[退会済みユーザー]

MVC4 のタグが付いてますが間違いないですか？ もし違うのであれば、他に ASP.NET とか ASP.NET MVC Framework というタグがありますので、そちらを使ってください。

[退会済みユーザー]

あと、JSON Generator とかは使ったことのない（その使い方を学んでまで回答を書く気力のない）自分のような回答者・閲覧者のために、サンプル JSON 文字列をアップしてもらえませんか？

[sanezane]

本文にイメージ、サンプルjsonの一部抜粋を追加しました。

[退会済みユーザー]

> サンプルjson(一部抜粋） ←抜粋でなく実際にエラーなくパースできる完全なサンプルをアップできませんか？　長すぎてアップできないような場合はそもそも質問のサンプルとして適切ではないので短くするよう考えてください。

[m.ts10806]

data1[0]["age"] ではどうでしょうか。datatype: 'json'の時点でjsonオブジェクトになっているはずなので、わざわざstringifyを挟まなくても良かったと思います。

[退会済みユーザー]

あなたの開発環境は書いていただけたでしょうか？　（上でお願いした件）

[sanezane]

mts10806さん　//3.のageについてはご指摘の記述で表示できました！！ 配列形式の場合(//5.）がまだ表示できずにいます。

[sanezane]

SurferOnWwwさん　開発環境について:windows7,visualstudio2017です。その他は現在席を外しているため少々お待ちください

Answer 1

下記は「添え字が0から連番の配列」となります。

[
 {}, // 0番目
 {},  // 1番目
  ....
 {} // n番目
]

それにより私は「data1[0]["age"] ではどうでしょうか」とコメントして、
それで想定の値がとれたようですね。
その部分をヒントに残っている5の部分もどうにかなりそうに思います。
""で囲ってしまっては単なる文字列にしかなりません。
開発ツールのコンソールに「そんなキーはないよ」ってエラーが出ていそうに思いますが。。

あと、.html()には第2引数はありません。

• .html()

任意のhtmlが入るhtmlString かhtmlを返すfunctionのみですね。

Comments

[sanezane]

ありがとうございます！！まだサンプルですので、またお世話になることがあるかと思いますがよろしくお願いします！

[m.ts10806]

解決したようで何よりです。
「サンプル」は実データに近い形のサンプルである必要があります。ご注意ください。