Question

I have an array of error messages: json.Errors

Is there a way that can create the following from this array using
jQuery?

    <ul class="message" id="message">
        <li>message1</li>
        <li>message2</li>
    </ul>

In the past I did something like the following code:

$.map(json.Errors, function (error) {
   return error + '</br>';
}).join('');

I am not sure it helps but maybe someone knows how $.map could
be used for this.

Answer 1

I’d suggest:

$.each(json.Errors, function(i,e) {
    $('#message li').eq(i).text(e);
});

JS Fiddle demo.

This, of course, requires a 1:1 relationship between the li elements and the json.Errors array.

If you wanted to create the li elements (rather than rely on their already being present), then I’d suggest:

$.each(json.Errors, function(i, e) {
    $('<li />').text(e).appendTo('#message');
});​

JS Fiddle demo.

References:

• appendTo().
• eq().
• jQuery.each().
• text().