質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.80%

json多次元配列の取得

受付中

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 776

iyokanna

score 10

ajaxを用いてjsonから市区町村の値をあ行・か行順に取得して表示させたいのですが、どのようにfor文を回して取得すればよいでしょうか
あ行・か行は取得できたのですが、citiesの配列の値が取得できません。

json

{
  "status": 200,
  "data": [
    {
      "title": "あ行",
      "cities": [
        {
          "title": "青ヶ島村",
          "group": "あ"
        },
        {
          "title": "昭島市",
          "group": "あ"
        },
        {
          "title": "あきる野市",
          "group": "あ"
        },
        {
          "title": "足立区",
          "group": "あ"
        },
        {
          "title": "荒川区",
          "group": "あ"
        },
        {
          "title": "板橋区",
          "group": "あ"
        },
        {
          "title": "稲城市",
          "group": "あ"
        },
        {
          "title": "江戸川区",
          "group": "あ"
        },
        {
          "title": "青梅市",
          "group": "あ"
        },
        {
          "title": "大島町",
          "group": "あ"
        },
        {
          "title": "大田区",
          "group": "あ"
        },
        {
          "title": "小笠原村",
          "group": "あ"
        }
      ]
    },
    {
      "title": "か行",
      "cities": [
        {
          "title": "葛飾区",
          "group": "か"
        },
        {
          "title": "北区",
          "group": "か"
        },
        {
          "title": "清瀬市",
          "group": "か"
        },
        {
          "title": "国立市",
          "group": "か"
        },
        {
          "title": "神津島村",
          "group": "か"
        },
        {
          "title": "江東区",
          "group": "か"
        },
        {
          "title": "小金井市",
          "group": "か"
        },
        {
          "title": "国分寺市",
          "group": "か"
        },
        {
          "title": "小平市",
          "group": "か"
        },
        {
          "title": "狛江市",
          "group": "か"
        }
      ]
    }
  ]
}

javascript

$.ajax({
                type: 'GET',
                url: 'city.json',
                dataType: 'json',
            })
            .done(function(){
                $.getJSON("city.json", function(data){
                    $(data.data).map(function(){

                        $('<div class="inner"><div class="cityCheckbox--parent">' + this.title + '<span class="icon--arrow"></span></div><ul class="cityCheckbox--child"><li><label class="checkbox"><input class="checkbox__item" type="checkbox" name="cities[]" value="' + 【市区町村名】 + '/>' + 【市区町村名】 + '</label></li></ul></div>').appendTo('#add');

                        }
                    });

                });

            })
            .fail(function() {
                alert("市区町村の取得に失敗しました");
            })

html

div#add

情報が不足していたらおっしゃってください。
基本的なところだと思いますが、なかなか解決できず。
ご教授お願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+1

$.ajaxの中で$.getJSONする必要はないでしょう

$.ajax({
url: 'city.json',
dataType: 'json',
}).done(function(res){
  $(res.data).each(function(){
    console.log($(this));
  });
}).fail(function(xhr,err) {
  alert(err);
});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

jQuery.map() の使い方が違っています。

$('#add').append($.map(data.data, function(d) {
  return $.map(d.cities, function(c) {
    var div = $('<div><label><input /></label></div>'); // ほんとはもっと長い
    div.find('input').val(c.title);
    div.find('label').append(document.createTextNode(c.title));
    return div;
  })
}));


https://api.jquery.com/jQuery.map/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.80%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る