javascriptで条件式の組み込み

html
1<input id="student"  type=text/>
2<input id="teacher"  type=text/>

したいこと
thymeleafフレームワークを使ってjsに変数を渡します。
渡された、生徒の名簿リストと担当教師のリストが渡され、生徒の名前が入力されるとその生徒の担当の教師が誰なのか分かるjsを書きたいがどのように書いたらいいでしょうか？

kyoya0819

2019/10/13 06:46

コントローラーとはなんですか？

1111777

2019/10/13 06:49

javaのコントローラーです

kyoya0819

2019/10/13 06:51

うーん？Javaも絡んでくるんですか？タグにはJavaScriptとjQueryとありますがJavaも絡んでくるならJavaのタグも追加した方が良いかと思われます。

1111777

2019/10/13 06:53

すいません追加できました

kyoya0819

2019/10/13 06:55

thymeleafというものを知らないのですがどのようなフォーマットで渡されるか例を提示していただけませんか？

1111777

2019/10/13 07:01

1111777

2019/10/13 07:01

有難うございます！このようなデータが渡されます。

tery

2019/10/13 07:14

こちらですが生徒と教師の紐付けが必要なのですが、以下のような形で渡されるという想定でよろしいでしょうか以下のようにできれば、学生と先生の紐付け可能かと思います var students = [ {'id:1,''name':'Nobuchan','age':4,'teacherID':3},{'id':2,'name':'Daichan','age':3,'teacherID':4} ]; var teacher = [{'id:3,''name':'yamada'},{'id':4,'name':'tanaka'}];

1111777

2019/10/13 07:18

なるほど、有難うございます！！紐ずけがない状態でデータを作ってしまっておりました。有難うございます。

1111777

2019/10/13 07:22 編集

すいません、上記の記載頂いた、紐ずけの書き方はdbの紐ずけの書き方でしょうか？それともjsの紐ずけの書き方なのでしょうか？データの紐ずけの仕組みが難しいです。

tery

2019/10/13 07:36

こちらですが DBにのみで紐づけるのは難しいかと思いますまず先生と生徒のデータをDBからそれぞれ取得してきて thymeleafでループ処理などで、先生と生徒の紐付けした上記の配列を作る必要があるかと思います dbで紐づける場合SQLでjoinなどを使って行う形かと思います

1111777

2019/10/13 07:40

なるほど、有難うございます！！

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

回答1件

ベストアンサー

一応　studentsとteachersが紐付けできていて配列が作られている前提でコードを記載いたします。

<html>

<head>
    <script>
        var students = [
            { 'id': 1, 'name': 'Nobuchan', 'age': 4, 'teacherID': 3 }, { 'id': 2, 'name': 'Daichan', 'age': 3, 'teacherID': 4 }
        ];
        var teachers = [{ 'id': 3, 'name': 'yamada' }, { 'id': 4, 'name': 'tanaka' }];
    </script>

</head>

<body>

    <input id="student" type="text" />
    <input id="teacher" type="text" />


    <script>
        var studentElement = document.getElementById("student");

        // 入力するたびに呼ばれる
        studentElement.addEventListener("input", function (event) {
            event.target.value
            /** 学生を名前検索 */
            var findStudent = students.find(student => {
                return student.name === event.target.value;
            });
            /** 学生が見つかったらひもづく先生を検索 */
            if (findStudent) {
                var teacher = teachers.find(teacher => {
                    return teacher.id === findStudent.teacherID;
                });
                if (teacher) {
                    alert(findStudent.name + "の先生は" + teacher.name + '先生');
                }
            }
        });
    </script>
</body>

</html>

投稿2019/10/13 07:37

tery

総合スコア88

1111777

2019/10/13 23:45

有難うございます！！あの、もし<input id="student" type="text" />が入力された時に教えて頂いたjsで答えを割り出し、その教師の名前を<input id="teacher" type="text" />に表示されるようにしたい場合、 if (teacher) { alert(findStudent.name + "の先生は" + teacher.name + '先生'); } このアラートのところを変えたらいいだけでしょうか？その時どのように書くか教えて頂けないでしょうか？