Output error list from array using JS or jQuery, into specific div

Question

I can't find an example that shows how to do this into a specific div.

I have a div #error-list and an array error that contains any number of error messages, such as:

var errors = ["First name is blank", "Last name is blank", "Company name is blank", "Email is blank"]

I want to output these errors individually as a ul li list into the #error-list div.

How would this be done? I have seen examples that create each li but do not specify where they are output. E.g:

for (i = 0; i < myArray.length; i++) {
    var liElement = document.createElement('li');
    liElement.appendChild(myArray[i]);
}

empiric · Accepted Answer · 2015-03-27 15:33:51Z

2

When you've included jQuery, use jQuery.

var str = "";
errors.forEach(function(error){
    str += '<li>' + error + '</li>' // build the list
});
$('#error-list').html('<p>There were some errors</p>')
                .append('<ul>' + str + '</ul>'); // append the list

edited Mar 27, 2015 at 15:33

empiric

7,8767 gold badges40 silver badges51 bronze badges

answered Mar 27, 2015 at 15:20

Amit Joki

59.4k7 gold badges80 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Francesca Over a year ago

This just outputs the numbers 0-3 instead of error messages.

Francesca Over a year ago

This works. For a bonus, how could I put a <p> in the div too, before the <ul> that says "There were some errors" ?

Andriy Ivaneyko · Accepted Answer · 2015-03-27 15:22:19Z

1

Use next code to create element

var myArray = ['1','2','3']
for (i = 0; i < myArray.length; i++) {
    var liElement = document.createElement('li');
    var txt = document.createTextNode(myArray[i])
    liElement.appendChild(txt);
}

the main poinnt is that you have to create text node and after that append it to liElement.

var txt = document.createTextNode(myArray[i])
liElement.appendChild(txt);

answered Mar 27, 2015 at 15:22

Andriy Ivaneyko

22.3k7 gold badges70 silver badges89 bronze badges

Comments

lshettyl · Accepted Answer · 2015-03-27 15:30:33Z

1

You can also do it the following way, using join() and append()

Demo

var errors = ["First name is blank", "Last name is blank", "Company name is blank", "Email is blank"];
$("#error-list").empty().append(function(){
    return "<ul><li>" + errors.join("</li><li>") + "</li></ul>";
});

edited Mar 27, 2015 at 15:30

answered Mar 27, 2015 at 15:28

lshettyl

8,1815 gold badges27 silver badges31 bronze badges

1 Comment

Jeremy Thille Over a year ago

Tricky, but elegant :)

Maxim Zhukov · Accepted Answer · 2015-03-27 15:20:23Z

0

Iterate over errors array and append new element as string.

var errors = ["First name is blank", "Last name is blank", "Company name is blank", "Email is blank"];

$(document).ready(function() {
    errors.forEach(function(error) {
        $("#error-list ul").append('<li>' + error + '</li>');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="error-list">
    <ul></ul>
</div>

answered Mar 27, 2015 at 15:20

Maxim Zhukov

10.2k5 gold badges50 silver badges92 bronze badges

1 Comment

Jeremy Thille Over a year ago

Damn, same answer, but you drew first.

Jeremy Thille · Accepted Answer · 2015-03-27 15:20:46Z

0

var errors = ["First name is blank", "Last name is blank", "Company name is blank", "Email is blank"]

errors.forEach( function(error){
  $("ul").append("<li>"+error+"</li>");
  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul></ul>

answered Mar 27, 2015 at 15:20

Jeremy Thille

26.4k12 gold badges48 silver badges64 bronze badges

4 Comments

Francesca Over a year ago

Where in this code is it specified to load into the #error-list element as asked in the question?

Jeremy Thille Over a year ago

Load? Load what? You didn't ask to load anything. You asked how to display an array as a list, that's what this code does.

Francesca Over a year ago

I specifically mentioned a specific div in the title. I also included that div ID in the OP. This isn't mentioned in your code, therefore doesn't answer the question.

empiric Over a year ago

Quote: I want to output these errors individually as a ul li list into the #error-list div.

Joey Fuller · Accepted Answer · 2015-03-27 15:27:53Z

0

<div>
  <ul>

    <li id="error1">
    </li>

    <li id="error2">
    </li>

    <li id="error3">
    </li>

  </ul>
</div>

<script>

  var cars = ["Error1", "Error2", "Error3"];

  document.getElementById("error1").innerHTML = cars[0];
  document.getElementById("error2").innerHTML = cars[1];
  document.getElementById("error3").innerHTML = cars[2];

</script>

I am not sure if this is the most efficient way but it does complete the task you asked for I believe.

answered Mar 27, 2015 at 15:27

Joey Fuller

13 bronze badges

Comments

Ben P · Accepted Answer · 2015-03-27 15:54:31Z

I was doing this for "tr/td/div"s today and it worked wonders .

for (i = 0; i < myArray.length; i++) {
$("#divId").append($('<li>')myArray[i]);
}

the closing tags aren't needed . hope this helps

EDIT

I found this pretty handy because you can dynamically assign id's to DOM elements like

   for (i = 0; i < myArray.length; i++) {
   $("#divId").append($('<li id="myLi'+i+'">')myArray[i]);
    }

and end up with

 <li id="myLi1">
 <li id="myLi2">

etc

To append "< p >" before the etc you can use this sort of concept that i used today :) the nesting of the brackets is very important here

 for (var i = 0; i < listOfNames.length; i++) {
                    $("#table").find('tbody')
                        .append($('<tr>')
                            .append($('<td style="width: 300px">')
                                .append($('<div id="div'+i+'" style="display: inline-block">'))
                                    .append($('<a >')
                                        .append($('<img src="../.gif" alt="Loading..." ' +
                                                  'id="Icon' + i + '" style="float: right">')
                                        )
                                    )
                            )
                        ).append($('<tr id="InfoRow' + i + '">')
                            .append($('<td>')
                                .append('<div id="Info' + i + '" style="display: inline-block;">')
                            )
                        );
                    $('#nameText'+i).text(listOfNames[i]);
                }

This is basically what it spits out to give you an idea

<tr>
    <td style="width: 300px"><div id="div1" style="display: inline-block"></div><a><img src=".gif" alt="Loading..."id="Icon1" style="float: right"/></a></td>
 </tr>
 <tr id="InfoRow1">
     <td><div id="Info1" style="display: inline-block;float: right"></div>/td>
 </tr>

Collectives™ on Stack Overflow

Output error list from array using JS or jQuery, into specific div

7 Answers 7

2 Comments

Comments

1 Comment

1 Comment

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

Comments

1 Comment

1 Comment

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related