ajax の動作が正常か確認したい

Question

$(function(){
    $('#ajax').on('click',function(){
 
        $.ajax({
            url:'/home',
            type:'GET',
            data:{
                'fiscalYear':$('#fiscalYear').val(),
                'yearMonth':$('#yearMonth').val(),
               
            }
        })
        .done( (searchResult) => {
      　　　　console.log("hello");
            console.log("formList:" + searchResult);
            
            $('result').html(searchResult);
            console.log(searchResult);  
            for(var i=0; i < 'searchResult';i++){
            $('.result').append('<tr><td>' + testingDateFrom + '</td><td>' + testingDateTo + '</td><td>' + competitionName + '</td><td>' + Prefecture + '</td><td>' + Name + '</td><td>' + subName + '</td></tr>')
            }
        })
        .fail( (searchResult) => {
            
            console.log("HTTPstatus : "+jqXHR.status);
            
        });
    });
});

data:{
'fiscalYear':$('#fiscalYear').val(),
'yearMonth':$('#yearMonth').val(),

        }　　dataの値が取れたことをコンソール上で確認できました。

$resultに出力するテスト用のデータを作成し、正常に動くか確認をとりたいです。

@RequestMapping(value = "/home/search", method = RequestMethod.GET)
	@ResponseBody
	public String search(@ModelAttribute formList formList1,Model model ,@RequestParam Map<String, String> params) {

		
		List<String> formList123 = Arrays.asList("dummy",
				                                 "dummy","dummy","dummy","preparing","UnSave");
		
		model.addAttribute("formList", formList1);
		model.addAttribute("formList", formList123);
		  return "redirect:/home";
		}
}

<thead>
                                  <tr>
                                    <th>検査日</th>
                                    <th>競技名</th>
                                    <th>都道府県</th>
                                    <th>団体名称</th>
                                 </tr>
                            </thead>
                            <tbody th:text="$('#result')">>
                                  <tr th:each="form:${formList}">
                                    <td th:text="${form.competitionDay}"</td>
                                    <td th:text="${form.competitionName}"</td>
                                    <td th:text="${form.competitionPlace}"</td>
                                    <td th:text="${form.competitionNM}"</td>
                                 </tr>
                            </tbody>

fiscalYear' と 'yearMonth'の検索条件により検査日、競技名、都道府県、団体名称の結果が返ってきます。その結果を以下のajaxの.append('文字列')に詰めたいです。

$('.result').append('<tr><td>' + testingDateFrom + '</td><td>' + testingDateTo + '</td><td>' + competitionName + '</td><td>' + Prefecture + '</td><td>' + Name + '</td><td>' + subName + '</td></tr>')

Comments

[m.ts10806]

JavaおよびSpringをタグに追加してください。
JavaScriptができる人がみんなJavaできるとも限りませんし逆もしかり。
Javaできる人でもSpringができるとは限りません。
正しくないタグ付けは機会損失につながります。

[退会済みユーザー]

承知しました。ありがとうございます。

Answer 1

doneに処理が流れていれば正常に動作しています

$('result').html(searchResult);

resultというHTML要素はないので、idかclassではないですか？
$('#result') もしくは $('.result')で指定してあげてください

for(var i=0; i < 'searchResult';i++){

これは無茶苦茶なのでむしろなにをしたいかわかりません

Comments

[退会済みユーザー]

ご回答ありがとうございます。おっしゃる通りclassにしてしまっておりました。
<tbody th:text="$('#result')">
<tr th:each="form:${formList}">に変更いたしましたが、よみこまれなかったのですが、

List<String> formList123 = Arrays.asList("dummy", "dummy", "dummy", "dummy", "planning","yyyy/mm/dd","yyyy/mm/dd",
"dummy","dummy","dummy","preparing","UnSave");
コントローラーで詰めたテストデータのformList123 がajaxに組み込んでいないためでしょうか？

[yambejp]

結局どういうデータをどう表示させたいのでしょうか？

[退会済みユーザー]

本番では名称や、住所などのデータを表示させたいのですが、今はajaxの処理が正常に動くかのテストをしたいです。なので、dummyにしました。

[yambejp]

具体的にどういったデータが戻ってきて
それをHTMLのどこにどう表示したいか例示ください

[退会済みユーザー]

はい、ありがとうございます。質問に上げさせていただきました。ajaxの.appendの（'　'）にテストデータを詰めたいです。

[yambejp]

testingDateFrom やtestingDateTo その他が唐突に記載されています
ajaxの戻りだとしてsearchResultを介してデータを受け取っているはずなので
もし想定するデータが帰ってくるなら参照の仕方次第でしょう

doneのコールバックの中で console.log(searchResult); しているのだから
どういったデータで参照できるかは判断つくはずです

[退会済みユーザー]

すいません、 console.log(searchResult);をしても値の確認ができないです。
ajax　結果　参照などでしらべたのですが、どうしたらいいのか、さがせませんでした。
参照の仕方次第ということは、html側に問題があるということでしょうか？

[yambejp]

> console.log(searchResult);をしても値の確認ができない

そうなるとサーバー側のapi(?)が正しい出力をしていないだけでは？
いずれにしろdoneの処理がされているならajaxは正常です

[退会済みユーザー]

ご回答ありがとうございます。$('.result')で実行できました。全角が混ざっていたみたいでした。m(__)m