Replace for loop with .each function

Question

How can I replace the for loop with .each function?

    function addOptionsToSelect(placeElement, placeData){
      placeData.sort(comparePlaces);
      placeElement.empty();
      for(var i = 0; i < placeData.length; i++ ){
          var place = placeData[i];
          var option = $("<option>"+ place.name +"</option>").attr("value", place.code)
          placeElement.append(option);
      }
  }

I'm voting to close this question as off-topic because the answer can trivially be determined by referring to the readily-available documentation for the function in question. — T.J. Crowder, Jun 07 '16 at 14:56

score 1 · Answer 1 · answered Jun 07 '16 at 14:45

You could use Array#forEach, a native ES5 method, for it.

The forEach() method executes a provided function once per array element.

function addOptionsToSelect(placeElement, placeData){
    placeData.sort(comparePlaces);
    placeElement.empty();
    placeData.forEach(function (place) {
        var option = $("<option>"+ place.name +"</option>").attr("value", place.code);
        placeElement.append(option);
    });
}

score 1 · Answer 2 · answered Jun 07 '16 at 14:50

DOM manipulation is costly.So create the entire set of options and add at once

 function addOptionsToSelect(placeElement, placeData){
      placeData.sort(comparePlaces);
      placeElement.empty();
     var option ="";
     placeData.forEach(function(item){
     option+ = $("<option>"+ item.name +"</option>").attr("value", item.code)
      })
     placeElement.append(option);
}

score 0 · Answer 3 · answered Jun 07 '16 at 14:46

0

A simple foreach syntax should do the job. The Javascript syntax uses a simple "for" inlcluding your objects keys:

function addOptionsToSelect(placeElement, placeData){
  placeData.sort(comparePlaces);
  placeElement.empty();

  for(var key in placeData)
  {
      place = placeData[key]
      var option = $("<option>"+ place.name +"</option>").attr("value", place.code)
      placeElement.append(option);
  }
}

answered Jun 07 '16 at 14:46

hugodecasta

262
4
13

In fact it's automatic, the "key" argument is deduced by the for statement so the key variable is generated from the object property. No check is required – hugodecasta Jun 07 '16 at 15:49

score 0 · Accepted Answer · edited May 23 '17 at 10:34

No one's actually posted it and people seem determined to answer this question, so for completeness, here's a version using jQuery.each:

function addOptionsToSelect(placeElement, placeData) {
    placeData.sort(comparePlaces);
    placeElement.empty();
    jQuery.each(placeData, function(_, place) { // Or $.each if $ == jQuery
        var option = $("<option>" + place.name + "</option>").attr("value", place.code)
        placeElement.append(option);
    });
}

Note that the first argument is the index of the entry; the entry itself is the second argument (and also this). Hence function(_, place) where we don't end up using the _ argument (_ is a valid identifier in JavaScript).

But I would use Array#forEach (shimmed if necessary) instead as Nina suggested or any of the many other ways to loop through arrays.

Replace for loop with .each function

4 Answers4