3つの連動するセレクトボックスを外部のJSONデータを用いて作りたい

３階層になっている外部のJSONデータを取得して、３つの連動するセレクトボックスを作りたいです。
まず、selectbox1に出力しようとしているのですが、値に undifined で出てきてしまい困っています。
是非、ご教授いただきたく思います。

html
1<!DOCTYPE html>
2<head>
3</head>
4<body>
5         <div>
6            <label>店<span>*</span></label>
7            <div>
8              <select id="selectbox1" class="input" name="ken">
9                <option value="">都道府県</option>
10              </select>
11              <select id="selectbox2" class="input" name="address">
12                <option value="">市区町村</option>
13              </select>
14              <select id="selectbox3" class="input" name="store">
15                <option value="">店名</option>
16              </select>
17            </div>
18          </div>
19  <script src="../javascript/jquery-3.1.1.min.js"></script>
20  <script src="../javascript/shopselect.js"></script>
21</body>

javascript
1
2 $(function(){
3
4  $.getJSON("../storeselect.json", function(areaList){
5      for(var i in areaList){
6        $("#selectbox1").append("<option value=" + areaList[i].areaNumber + ">" + areaList[i].areaName + "</option>");
7        }
8      });
9  });

JSON
1{
2    "areaList": [
3        {
4            "areaName": "岩手県",
5            "areaNumber":"1",
6            "cityList": [
7                {
8                    "cityName": "盛岡市",
9                    "cityNumber":"1",
10                    "storeList": [
11                        {
12                            "id": "11",
13                            "storeName": "盛岡駅前店",
14                            "storeNumber":"1",
15                            "link": "morioka"
16                        }
17                    ]
18                },
19                {
20                    "cityName": "北上市",
21                    "cityNumber":"2",
22                    "storeList": [
23                        {
24                            "id": "6",
25                            "storeName": "北上西口店",
26                            "storeNumber":"1",
27                            "link": "kitakaminishi"
28                        },
29                        {
30                            "id": "4",
31                            "storeName": "北上駅前店",
32                            "storeNumber":"2",
33                            "link": "kitakamiekimae"
34                        }
35                    ]
36                }
37            ]
38        },
39        {
40            "areaName": "神奈川県",
41            "areaNumber":"2",
42            "cityList": [
43                {
44                    "cityName": "横浜市",
45                    "storeNumber":"1",
46                    "storeList": [
47                        {
48                            "id": "7",
49                            "storeName": "横浜駅前店",
50                            "storeNumber":"1",
51                            "link": "yokohamaekimae"
52                        }
53                    ]
54                }
55            ]
56        }
57    ]
58}
59

行動規範の内容に同意します

回答1件

ベストアンサー

よくjsonの構造をみてください
jsonデータをareaListで受けてますがオブジェクトの中の
areaListにアクセスしないといけないのでは？

javascript
1$.getJSON("../storeselect.json", function(data){
2      for(var i in data.areaList){
3・・・

投稿2018/03/15 01:54

yambejp

総合スコア114738

rere

2018/03/15 02:21

回答いただいた通りでした。助かりました........ ありがとうございました!!!!!!!!!!!!!!!!!!!

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

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

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

3つの連動するセレクトボックスを外部のJSONデータを用いて作りたい

3つの連動するセレクトボックスを外部のJSONデータを用いて作りたい

関連した質問