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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

1176閲覧

$.each()文からfor文への書き換えが上手くいかない

Beginnerrr

総合スコア17

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/08/10 04:25

編集2018/08/10 05:22

私はJavaScriptを始めたばかりで、文法が分かっていなかったり、記法が汚いかもしれませんがご容赦ください!

個人情報入力フォーム的なものを作りながらJavaScriptの勉強をしています。
現在は、学歴の入力フォームを作っています。
仕様は、「中学」「高校」「大学」「行ってない」の4つのラジオボタンと、学校名が入ったセレクトボックスです。
セレクトボックスのデータは、ラジオボタンで学歴をクリックすると学歴ごとにJSONデータを読み込む感じです。

ラジオボタンを押してない状態だと何も出ないようにしてます。
イメージ説明

ラジオボタンで学歴を選択すると、それぞれのデータが出ます
イメージ説明
イメージ説明

質問

https://q-az.net/without-jquery-each/
このページを参考にしながら、$.each()をfor文で書き換えたのですが上の写真で示したように動作しません。。
$.each文とfor文は以下です
コード全体は下部に記載しています。
for文で書くと下の写真のようになります。

イメージ説明

検証を使ってもエラー文は出ませんでした。

$.each()文のコード

JavaScript

1 case 1: //高校 2 $.getJSON("school.json", {name: "chara"}, function(data) { 3 var list = data.highschool; 4 $.each(list, function(i) { 5 document.form_signin.school.options[i] = new Option(list[i], list[i]); 6 }); 7 }); 8

for文に書き換えたコード

JavaScript

1case 1: //高校 2 $.getJSON("school.json", {name: "chara"}, function(data) { 3 var list = data.highschool; 4 for(var i=1; i<=list.length; i++ ) { 5 document.form_signin.school.options[i] = new Option(list[i], list[i]); 6 } 7 });

何が間違っているかも分かりません。
どなたかアドバイスよろしくお願いします!!!

以下は、コードの全体です。

javascript

1function schoolSelect(value) { 2 //セレクトボックスの初期化 3 arrayNum = document.form_signin.school.options.length; 4 for(var i=1; i<arrayNum; i++) { 5 document.form_signin.school.options[1] = null; 6 } 7 8 //選択した学校のリストをjsonファイルからAJAXで取得し、セレクトボックスに追加 9 switch(parseInt(value, 10)) { 10 case 0: //中学 11 $.getJSON("school.json", {name: "chara"}, function(data) { 12 var list = data.juniorhighschool; 13 $.each(list, function(i) { 14 document.form_signin.school.options[i] = new Option(list[i], list[i]); 15 }); 16 }); 17 break; 18 19 case 1: //高校 20 $.getJSON("school.json", {name: "chara"}, function(data) { 21 var list = data.highschool; 22 $.each(list, function(i) { 23 document.form_signin.school.options[i] = new Option(list[i], list[i]); 24 }); 25 }); 26 27 // for(var i=1; i<=list.length; i++ ) { 28 // document.form_signin.school.options[i] = new Option(list[i], list[i]); 29 // }; 30 31 break; 32 33 case 2: //大学 34 $.getJSON("school.json", {name: "chara"}, function(data) { 35 var list = data.university; 36 $.each(list, function(i) { 37 document.form_signin.school.options[i] = new Option(list[i], list[i]); 38 }); 39 }); 40 break; 41 42 default: break; 43 } 44}

html

1<form class="form-signin" name="form_signin"> 2 <tr> 3 <th>最終学歴<span style="color:red;">*</span></th> 4 <td> 5 <input type="radio" name="career" id="junior" value="0" onchange="schoolSelect(this.value)" ><label for="junior">中学</label> 6 <input type="radio" name="career" id="high-school" value="1" onchange="schoolSelect(this.value)" ><label for="high-school">高校</label> 7 <input type="radio" name="career" id="university" value="2" onchange="schoolSelect(this.value)" ><label for="university">大学</label> 8 <input type="radio" name="career" id="no-career" value="3" onchange="schoolSelect(this.value)" ><label for="no-career">行ってない</label> 9 <br> 10 学校名: 11 <select id="school" class="w250" onblur="careerCheck()" > 12 <option value="0" >-選択-</option> 13 </select> 14 <br> 15 <span id="careerError">*必須項目です</span> 16 </td> 17 </tr> 18</form>

json

1{"juniorhighschool":{ 2"1":"大阪市立桜宮中学校", 3"2":"大阪市立高倉中学校", 4"3":"大阪市立友渕中学校", 5"4":"大阪市立都島中学校", 6"5":"大阪市立淀川中学校", 7"6":"大阪市立下福島中学校", 8"7":"大阪市立野田中学校", 9"8":"大阪市立八阪中学校", 10"9":"大阪市立春日出中学校", 11"10":"大阪市立此花中学校", 12"11":"大阪市立梅香中学校", 13"12":"大阪市立西中学校", 14"13":"大阪市立花乃井中学校 15}, 16"highschool":{ 17"1":"大阪市立都島工業高等学校", 18"2":"大阪市立都島第二工業高等学校", 19"3":"大阪市立東高等学校", 20"4":"大阪市立桜宮高等学校", 21"5":"大阪府立西野田工科高等学校", 22"6":"大阪市立咲くやこの花高等学校", 23"7":"大阪市立西高等学校", 24"8":"大阪府立市岡高等学校", 25"9":"大阪府立港高等学校", 26"10":"大阪府立泉尾高等学校", 27}, 28"university":{ 29"1":"大阪大学", 30"2":"大阪教育大学", 31"3":"大阪市立大学", 32"4":"大阪府立大学", 33"5":"藍野大学", 34"6":"LCA大学院大学", 35"7":"追手門学院大学", 36"8":"大阪青山大学", 37"9":"大阪医科大学", 38"10":"大阪大谷大学" 39} 40} 41

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2018/08/10 04:39

「うまくできない」とは「何をしたときに」「どうなると思って」「どうなったのか」を、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。
m.ts10806

2018/08/10 04:42

「$.each()をfor文で書き換えた」ところがありますがコメントアウトされています。うまくいっていないソースで結構ですのでご提示ください。あと「school.json」の内容もサンプルデータで結構ですので提示いただくと再現確認がとれてアドバイスもしやすくなります。
Beginnerrr

2018/08/10 05:24

ご指摘有難うございます!質問内容文を訂正いたしました!
guest

回答2

0

ベストアンサー

data.highschoolはオブジェクトなのでlengthをもっていません、
forをつかうならinでまわせばいいでしょう

javascript

1for(var i in data.highschool){ 2console.log(data.highschool[i]); 3}

投稿2018/08/10 06:15

yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

root_jp

2018/08/10 06:25 編集

for in だと、学校名ではなく、1, 2, 3のようなキーが取得されませんか?
yambejp

2018/08/10 06:27

iが1,2,3・・・と変化して、data.highschool[i]が学校名です
root_jp

2018/08/10 06:28

あーほんとですね。data.highschool[i]でアクセスしてました。失礼しました。
Beginnerrr

2018/08/10 09:20

ありがとうございます!!! オブジェクトへの理解が甘すぎました、、、
guest

0

上手くいかないとは、どう上手くいかないのでしょうか?

パッと見て思ったのは、ループインデックスは0で初期化すべきということと
i <= list.length ではなく i < list.length ではないかと思いました。

JavaScript

1for (var i = 0; i < list.length; i++) { 2 document.form_signin.school.options[i] = new Option(list[i], list[i]); 3}; 4

追記

highschoolは配列ではなく、オブジェクトですね。
以下のような感じでやるとどうでしょうか?

JavaScript

1var values = Object.values(list); 2for(var i = 0; i < values.length; i++) { 3 document.form_signin.school.options[i] = new Option(values[i], values[i]); 4} 5 6とか 7 8for(var value of Object.values(list)) { 9 document.form_signin.school.options[i] = new Option(value, value); 10}

投稿2018/08/10 04:48

編集2018/08/10 06:12
root_jp

総合スコア4666

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Beginnerrr

2018/08/10 06:05

質問内容が曖昧でしたので、訂正しました! 上手くいかないとは、データが詠み込まれないということです! そちらのコードで実行してもデータが詠み込まれませんでした。。。
root_jp

2018/08/10 06:12

追記しました。
Beginnerrr

2018/08/10 09:21

ありがとうございます!!! お陰様で解決できました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問