在Spring/jQuery中更改JSON

Question

我在Spring中創建了一個webapp，並且遇到了一個對我來說非常困難的問題。在我的控制器我有方法：

@RequestMapping(value="/add", method = RequestMethod.POST) 
public @ResponseBody List<Word> addNewWord(@RequestBody Word word, Principal principal) { 
    wordService.addNewWord(word, principal.getName()); 
    return getCurrentWords(principal.getName()); 
} 

protected List<Word> getCurrentWords(String username) { 
    List<Word> accountWords = new ArrayList<Word>(); 
    accountWords.addAll(wordService.listUserWords(username)); 
    return accountWords; 
} 

該返回構造這樣JSON對象[這是一個例子]：

[ 
{"word":"battle","wordId":165}, 
{"word":"better","wordId":161}, 
{"word":"bread","wordId":167}, 
{"word":"cool","wordId":158}, 
{"word":"fight","wordId":166}, 
{"word":"forest","wordId":163}, 
{"word":"list","wordId":160}, 
{"word":"roll","wordId":164}, 
{"word":"semicolon","wordId":168}, 
{"word":"super","wordId":139}, 
{"word":"thing","wordId":162}, 
{"word":"word","wordId":159} 
] 

，在我的jquery文件我有一個代碼：

$("#add_word_submit").click(function(e) { 
    e.preventDefault(); 
    $("#add_word_input").focus(); 
    var word = $('#add_word').serializeObject(); 
    $.postJSON("words/add.html", word, function(words) { 
     $("#add_word_input").val(""); 
     showDividedAccountWords(words); 
    }); 
}); 

function showDividedAccountWords(words) { 

var accountWords = new Object(); 
accountWords.words = words; 

wordListTemplate = 
"{{#words}}" + 
    "<ul class='word_list'>" + 
    "<li class='word'>" + 
     "<strong>{{wordId}}: </strong>" + 
     "<span>{{word}}</span>" + 
    "</li>" + 
    "</ul>"; 
"{{/words}}" + 


var accountWordsHTML = Mustache.to_html(wordListTemplate, accountWords); 
$("#words").html(accountWordsHTML); 
} 

當我通過單擊#add_word_submit提交表單時，jquery將JSON對象[new Word Object]發送到Spring控制器，並返回當前用戶單詞列表。當前的單詞列表以JSON對象[我在上面粘貼]返回，接下來將它用在我的mustache.js模板中。

一般來說，我想獲得thorugh ajax自動刷新用戶單詞列表時，我添加一個新單詞。到目前爲止，一切都很好，工作得很好，但我希望有一些不同的輸出。現在，我得到一個UL列表：

<ul class="word_list"> 
    <li class="word"><span>1: Word</span></li> [1] 
    <li class="word"><span>1: Word</span></li> [2] 
    <li class="word"><span>1: Word</span></li> [3] 
    ... 
    <li class="word"><span>1: Word</span></li> [13] 
</ul> 

但我想有一個輸出，當我通過JSON獲取當前的單詞列表[像上面]我想它分成許多無序列表中會出現只有最多10個字。因此，如果我有像上面這樣的JSON worlist [13個字]，我希望有一個包含10個單詞的列表，以及包含3個單詞的下一個列表等，當有更多單詞時。

<ul class="word_list"> 
    <li class="word"><span>1: Word</span></li> [1] 
    <li class="word"><span>1: Word</span></li> [2] 
    <li class="word"><span>1: Word</span></li> [3] 
    ... 
    <li class="word"><span>1: Word</span></li> [10] 
</ul> 

<ul class="word_list"> 
    <li class="word"><span>1: Word</span></li> [1] 
    <li class="word"><span>1: Word</span></li> [2] 
    <li class="word"><span>1: Word</span></li> [3] 
</ul> 

我不知道哪裏是做[在控制器或者只是jQuery的]，以及如何做到這一點的最好方法是什麼？我真的很感謝一些幫助！

Answer 1

試試這個：

function showDividedAccountWords(words) { 
    var wordListTemplate = 
    "{{#words}}" + 
     "<ul class='word_list'>" + 
     "<li class='word'>" + 
      "<strong>{{wordId}}: </strong>" + 
      "<span>{{word}}</span>" + 
     "</li>" + 
     "</ul>" + 
    "{{/words}}"; 

    // Take 10 words at a time, until there are no words. 
    for(var w = words.splice(0, 10); w.length > 0; w = words.splice(0, 10)) { 
     var accountWordsHTML = Mustache.to_html(wordListTemplate, {words: w}); 
     $("#words").append(accountWordsHTML); 
    }