Display JavaScript array in vertical list

Question

I have an array I have generated and I want to display it in html as a vertical list, preferably as each individual element.

I have done this:

var a = _.intersection(viewedUserLikedUsersArray, loggedInLikedUsersArray);
  for (var i=0; i < a.length; i++){
    displayListOfMatches.innerHTML = a[i];
  }

but obviously this way will replace the innerHTML with the last element in the array rather than stacking each one on top of each other

displayListOfMatches.innerHTML = a.join("<br>"); would be one way; no loop — Thomas
– Thomas, Commented Sep 29, 2016 at 15:46

T.J. Crowder · Accepted Answer · 2016-09-29 15:33:41Z

1

You'll probably get people saying to do this:

displayListOfMatches.innerHTML = "<p>" + a.join("</p><p>") + "</p>";

...which works but note that the content of the array entries will be parsed as HTML.

If that's not okay, you can either build an HTML string by replacing those characters via map:

displayListOfMatches.innerHTML = a.map(function(entry) {
    return "<p>" + entry.replace(/&/g, "&amp;").replace(/</g, "&lt;") + "</p>";
}).join("");

...or build the elements as you go, perhaps with forEach:

displayListOfMatches.innerHTML = ""; // You can leave this out if it's empty
a.forEach(function(entry) {
    var p = document.createElement("p");
    p.appendChild(document.createTextNode(entry));
    displayListOfMatches.appendChild(p);
});

Of course, in all cases, you can adjust it to use different elements/markup.

edited Sep 29, 2016 at 15:33

answered Sep 29, 2016 at 15:25

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

2 Comments

The worm Over a year ago

ok yeh think this makes sense. no idea why im getting a syntax error. i have just placed your code inside a function and now it is complaining about the last bracket...

T.J. Crowder Over a year ago

@Theworm: That would be because I left off the ); that should have been at the end of the second code block. :-) Sorry about that. It's there now.

Collectives™ on Stack Overflow

Display JavaScript array in vertical list

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related