Changing JSON in Spring/jQuery

Question

I am creating a webapp in Spring and I faced a problem which is very difficult for me. In my controller I have methods:

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

which return JSON object structured like this [this is an example]:

[
 {"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}
]

and in my jquery file I have a code:

$("#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);
}

When I submit my form by clicking #add_word_submit, jquery sends JSON object [new Word Object] to Spring controller which in return gets current user word list. That current word list is returned as JSON Object [which I pasted above] and next it is used in my mustache.js template.

In general I want to get thorugh ajax automatically refreshed user word list when i add a new word. Until now everything is ok and works very well but I would like to have slightly different output. Now I am getting one ul list:

<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>

but I would like have an output that when I get current word list via JSON [like above] I would like to divide it into many ul lists in which there will be only max 10 words. So if I have JSON worlist like above [13 words] I would like to have one list with 10 words and next list with 3 words and so on when there will be more words.

<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>

I do not know where is the best way to do it [in Controller or maybe just in jQuery] and how to do it? I would really appreciate some help!

Answer 1

Try this:

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