json多次元配列の取得

Question

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

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

Answer 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/

Answer 2

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

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