Изменение JSON в Spring / jQuery - PullRequest
Новая
       6

Изменение JSON в Spring / jQuery

0 голосов
/ 15 февраля 2012

Я создаю веб-приложение весной и столкнулся с проблемой, которая очень сложна для меня.В моем контроллере у меня есть методы: 

@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 [новый объект Word] в контроллер Spring, который в свою очередь получает список текущих слов пользователя.Этот текущий список слов возвращается как объект JSON [который я вставил выше], а затем он используется в моем шаблоне mustache.js.

В общем, я хочу, чтобы через 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 [как выше], я хотел бы разделить его на множество списков ul, в которых естьбудет не более 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>

Я не знаю, где лучше всего это сделать [в Controller или, может быть, просто в jQuery] и как это сделать?Буду очень признателен за помощь!

1 Ответ

1 голос
/ 16 февраля 2012

Попробуйте это: 

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