Javascript 在Spring/jQuery中更改JSON

我在春天创建了一个webapp，我遇到了一个对我来说非常困难的问题。在我的控制器中，我有以下方法：

@RequestMapping（value=“/add”，method=RequestMethod.POST）
public@ResponseBody List addNewWord（@RequestBody Word，Principal）{
addNewWord（word，principal.getName（））；
返回getCurrentWords（principal.getName（））；
}
受保护列表getCurrentWords（字符串用户名）{
List accountWords=new ArrayList（）；
accountWords.addAll（wordService.listUserWords（username））；
返回单词；
}

返回如下结构的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);
}

$（“添加单词”和“提交”）。单击（功能（e）{
e、 预防默认值（）；
$（“添加单词输入”）.focus（）；
var word=$（'#add_word'）.serializeObject（）；
$.postJSON（“words/add.html”、word、函数（words）{
$（“#添加#单词#输入”）.val（“”）；
显示dividedaccountwords（单词）；
});
});
函数showDividedAccountWords（单词）{
var accountWords=新对象（）；
accountWords.words=单词；
wordListTemplate=
“{{{单词}”+
“
”+
“
”+
“{{wordId}：”+
“{{word}}”+
“
”+
“
”；
“{{/words}}”+
var accountWordsHTML=Mustache.to_html（wordlistmplate，accountWords）；
$（“#words”）.html（accountWordsHTML）；
}

当我通过单击#add_word_submit提交表单时，jquery将JSON对象[new word object]发送到Spring控制器，而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>

1:word
[1]
1:word
[2]
1:word
[3]
...
1:word
[13]

但我希望有一个输出，当我通过JSON（如上所述）获得当前单词列表时，我希望将其划分为许多ul列表，其中最多只有10个单词。因此，如果我有上面[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>

1:word
[1]
1:word
[2]
1:word
[3]
...
1:word
[10]


1:word
[1]
1:word
[2]
1:word
[3]

我不知道在哪里做这件事最好（在Controller中或者仅仅在jQuery中），以及如何做？我真的非常感谢你的帮助

试试这个：

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);
    }

函数showDividedAccountWords（words）{
变量wordListTemplate=
“{{{单词}”+
“
”+
“
”+
“{{wordId}：”+
“{{word}}”+
“
”+
“
”+
“{{/字}}”；
//一次读10个单词，直到没有单词为止。
对于（var w=字.拼接（0,10）；w.长度>0；w=字.拼接（0,10））{
var accountWordsHTML=Mustache.to_html（wordListTemplate，{words:w}）；
$（“#字”）.append（accountWordsHTML）；
}

这很有效！你真是太天才了：）。我没想到我的问题能这么快解决。非常感谢！Mariusz-第一个版本中有一个严重的错误。这是一个永无止境的循环。请切换到更新版本！Mariusz，我的第一个答案有一个严重的错误，一个永无止境的循环。请切换到我的更新答案！