Iterating over an string-based array with JS/jQuery

Question

I have something like this:

$(document).ready(function(){ 
  var veeCountries = ["America", "Japan"];

  $.each(veeCountries, function( ? ) {
    $("#content").html("<p>" + value + "</p>");
  });
});

I'm trying to output something like this:

<p>America</p>
<p>Japan</p>

But I'm stuck, what's the best and easiest way of doing this?

@pilot - then hit close and mark it as duplicate so we can see the duplicate ? — adeneo, Jan 17 '14 at 16:56
@adeneo..question is about `?` in `function( ? )` . Here is [How to loop through array in jquery](http://stackoverflow.com/questions/3943494/how-to-loop-through-array-in-jquery) — Deepak Ingole, Jan 17 '14 at 17:00

score 4 · Accepted Answer · answered Jan 17 '14 at 16:42

4

Almost literally the same as the example in the docs on $.each(): http://api.jquery.com/jquery.each/

$.each(veeCountries, function(index, value) {
   $("#content").append("<p>" + value + "</p>");
  });
});

answered Jan 17 '14 at 16:42

veddermatic

1,082
7
15

score 3 · Answer 2 · answered Jan 17 '14 at 16:42

The each method passes the index and the actual item of the array to the callback function.

$(document).ready(function(){ 
  var veeCountries = ["America", "Japan"];

  $.each(veeCountries, function(index, item) {
    $("#content").append("<p>" + item + "</p");
  });
});

Read the docs at jQuery.each

score 2 · Answer 3 · answered Jan 17 '14 at 16:41

The arguments for .each() if the index and the native DOM element, but using html() you're overwriting the content on each iteration.
Use append() inside the loop, or create the string in the loop and pass it to html() once.

$(document).ready(function(){ 
  var veeCountries = ["America", "Japan"],
      output       = '';

  $.each(veeCountries, function( index, value ) {
      output += "<p>" + value + "</p>");
  });

  $("#content").html(output);

});

or a little neater

$("#content").html('<p>' + veeCountries.join('</p><p>') + '</p>');

Iterating over an string-based array with JS/jQuery

3 Answers3