jQuery Loop from a AJAX Response

Question

I'm building a tagger. After a user submits a tag, ajax returns:

{"returnmessage":"The Ajax operation was successful.","tagsinserted":"BLAH, BLOOOW","returncode":"0"}

I want to take the tagsinserted and loop through it, and during each loop take the item in the list and insert it on the HTML page. suggestion on how to do this right?

Here is the current code:

$("#tag-post").click(function(){
    // Post $('#tag-input').val()
    $.ajax({
        url: '/tags/ajax/post-tag/',
        data: { newtaginput : $('#tag-input').val(), userid : $('#userid').val()},
        success: function(data) {
            // After posting
            alert('done');

        }
    });     

});

Answer 1

You can loop through the tags by calling data.tags.split(',') and looping through the array it returns.

You can insert tags to the page by calling $('<li />').text(tag).appendTo('someSelector').

Answer 2

You can do something like this:

$("#tag-post").click(function(){
  $.ajax({
    url: '/tags/ajax/post-tag/',
    data: {newtaginput : $('#tag-input').val(), userid : $('#userid').val()},
    success: function(data) {
      $.each(data.tagsinserted.split(', '), function(i, v) {
        $("<div></div>").text(v).appendTo("#tagHolder");
      });
    }
  });
});