jQueryとJavaのリストの例

getdocs

6年前

jQueryを使用してJavaリストを反復処理する直接的な方法はありません。次のケーススタディを参照してください。

スプリングコントローラ

    @RequestMapping(value = "/", method = RequestMethod.GET)
    public ModelAndView getPages() {

        List<String> list = new ArrayList<String>();
        list.add("List A");
        list.add("List B");
        list.add("List C");
        list.add("List D");
        list.add("List E");

        ModelAndView model = new ModelAndView("somepage");
        model.addObject("list", list);

        return model;

    }

JSPページでは、 `$ {List} ‘を介してリストオブジェクトにアクセスし、JSTLを介してそれを反復処理することができます。

somepage.jsp

    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

    <c:forEach var="listValue" items="${list}">
    <li>${listValue}</li>
    </c:forEach>

ListオブジェクトをjQueryに直接渡したいのですが？

問題:Javaのリストに二重引用符はありません.

jQuery `$ .each（）`を使ってJavaリストを反復する例

htmlページ

<script>
    $(document).ready(function() {

        var list = ${list};
        $.each(list, function( index, value ) {
            alert( index + ": " + value );
        });

    });
</script>

上記のjQueryスクリプトは実行されません “Uncaught SyntaxError:

予期しないトークン ”

htmlページ（ソースコード）

<script>
        $(document).ready(function() {

        var list =[List A, List B, List C, List D, List E];
        $.each(list, function( index, value ) {
        alert( index + ": " + value );
        });

        });
</script>

上記のhtmlソースコードを確認すると、Java Listはリストの値を二重引用符で囲まなかったので、 “jQueryは処理できません。

解決策:JavaのリストをJSONに変換する

このソリューションは、jQueryに渡す前にJava ListをJSON形式に変換します。 Springコントローラでは、Jackson（または他のJSONプロセッサ）を使用してListをJSON形式に変換します。

    @RequestMapping(value = "/", method = RequestMethod.GET)
    public ModelAndView getPages() {

        ObjectMapper mapper = new ObjectMapper();

        List<String> list = new ArrayList<String>();
        list.add("List A");
        list.add("List B");
        list.add("List C");
        list.add("List D");
        list.add("List E");

        ModelAndView model = new ModelAndView("somepage");

        String json = "";
        try {
            json = mapper.writeValueAsString(list);
        } catch (Exception e) {
            e.printStackTrace();
        }

        model.addObject("list", json);

        return model;

    }

htmlページ

<script>
    $(document).ready(function() {

        var list = ${list};
        $.each(list, function( index, value ) {
            alert( index + ": " + value );
        });

    });
</script>

HTMLソースコードを確認する:

htmlページ（ソースコード）

<script>
        $(document).ready(function() {

        var list =["List A","List B","List C","List D","List E"];
        $.each(list, function( index, value ) {
        alert( index + ": " + value );
        });

        });
</script>

完了しました。