私のビュー（jsp）からコントローラに複雑なオブジェクトのリストを渡すには

Question

自分のコントローラからオブジェクトのリスト（自分自身の参照を含む）を自分のビューから渡す必要があります。私は非常に多くのリンクを通過しましたが、満足のいく解決策を得られませんでした。 以下は私のシナリオとコードスニペットです。 私は質問と回答のリストを持つUIを持っています。各質問にはサブ質問があり、メイン質問の子となります。

私のコントローラに質問のリストとして完全なデータを渡したいと思います。 私のUIは次のようである： https://i.stack.imgur.com/yA8hN.png

モデルは以下のとおりです。

質問モデル：

public class Question { 

    private String question; 
    private String question_type; 
    private List<String> answers; 
    private List<Question> subQuestions; 

    .. getter and setter and constructors... 
    } 



    public class SurveyData { 

    private List<Question> data = new ArrayList<Question>(); 
    ... getter and setter and constructors... 
    } 

コントローラー：私のjspで

@RequestMapping(value = "save", method = RequestMethod.POST) 
public ModelAndView saveData(HttpServletRequest request, HttpServletResponse response, @ModelAttribute("surveyData") SurveyData data) { 
     // code to save the data.... 
    } 

私はすべてのフェッチされたjavascriptのメソッドを持っていますデータと隠された入力値を保存します。

JSP /ビュー：

<form id="surveyForm" modelAttribute="surveyData" method="POST"> 
    <table style="height: 200px;" border="0" width="70" cellspacing="0"> 
     <tbody> 
      <tr style="height: 50px;"> 
       <td> 
        <h2> 
         <span style="color: #00ccff;">&nbsp;ADD NEW CALL&nbsp;</span> 
        </h2> 
       </td> 
      </tr> 
      <tr style="height: 30px;"> 
       <td> 
        <div id="question-container"> 
         <p style="padding-left: 1000px;"> 
          <span style="color: #999999;"><a style="color: #999999;" 
           title="+ ADD NEW QUESTION" href="javascript:void(0);" 
           onclick="javascript:addNewQuestion();">+ ADD NEW QUESTION</a></span> 
         </p> 
        </div> 
       </td> 
      </tr> 
      <tr style="height: 70px;"> 
       <td>&nbsp;&nbsp; 
       <input type="hidden" id="surveyData" name="surveyData" value="" /> 
       <input type = "submit" value = "Save" onclick="javascript:saveData();"/>&nbsp; 
       <input type = "submit" value = "Cancel" onclick="javascript:cancel();"/> 

       </td> 
      </tr> 
     </tbody> 
    </table> 
</form> 


    <script> 
    function saveData() { 
     var surveyData = {}; 
     var questions = []; 
     // code to fetch the data and save it in questions array 
     . 
     . 
     . 
     surveyData.data = questions; 
     $("#surveyData").val(surveyData); 
     $("#surveyForm").submit(); 
     } 
</script> 

私はmodelAttribuiteパラメータに任意のデータを取得しておりません。 このデータをコントローラに渡すにはどうすればよいですか？

ありがとうございます！

Answer 1

Spring MVC Documentに記載されているリスト項目にネストされたプロパティを使用できます。

あなたのケースでは、適切な商品インデックスを持つJSTL forEach繰り返しを使用して、JSPで質問とサブ質問を生成できます。新しい項目を追加するには、JavaScriptを使用して、新しいインデックスで新しい入力要素のセットを追加します。

var surveyData = { 
    data: [{ 
    question: "question1", 
    question_type: "type1", 
    answers: [ 
     "answer1", 
     "answer2" 
    ], 
    subQuestions: [] 
    }, { 
    question: "question1", 
    question_type: "type1", 
    answers: [ 
     "answer1", 
     "answer2" 
    ], 
    subQuestions: [] 
    }] 
} 

var mapData = function (data, prefix) { 
    if (Array.isArray(data)) { 
    // map array data 
    return data 
     .map((e, i) => mapData(e, prefix + '[' + i + ']')) 
     .reduce((a, b) => a.concat(b), []); 
    } else if ((typeof data === "object") && data !== null) { 
    // map object data 
    return Object.getOwnPropertyNames(data) 
     .map(k => mapData(data[k], prefix + '.' + k)) 
     .reduce((a, b) => a.concat(b), []); 
    } 
    return [{ 
    key: prefix, 
    value: data 
    }] 
} 

var surveyDataInputs = mapData(surveyData, "surveyData"); 

// remove old nodes 
document.querySelectorAll('input[type=hidden][name^=surveyData]').forEach(i => i.remove()); 

// add new nodes 
var surveyForm = document.querySelector("#surveyForm"); 
surveyDataInputs.map(d => { 
    var input = document.createElement('input'); 
    input.setAttribute("type", "hidden"); 
    input.setAttribute("name", d.key); 
    input.setAttribute("value", d.value); 
    surveyForm.appendChild(); 
}) 

$("#surveyData").val(surveyData); 
$("#surveyForm").submit();