How can I change my For Loop of an Array to forEach?

Question

I am using an array that has some objects in JavaScript, which is then displayed onto an HTML element, and this works by having them in a for loop and the class changes if the team WON a match and if the team LOST a match.

But, I was wondering if there is a way for me to change the long for loop to forEach.

Below is my HTML code and JavaScript code.

HTML:

<div class="form-guide">
  <div class="england-form-guide" id="englandFormGuide">
    <p class="scores" id="scores"></p>
  </div>
</div>

JavaScript:

var guide = [{
    result: "won",
    match: "England 2-1 Belgium",
  },
  {
    result: "lost",
    match: "England 0-1 Denmark",
  },
  {
    result: "won",
    match: "England 3-0 Republic of Ireland",
  },
  {
    result: "lost",
    match: "Belgium 2-0 England",
  },
  {
    result: "won",
    match: "England 4-0 Iceland",
  }
]

var text = "";

for (var i = 0; i < guide.length; i++) {
  text += guide[i].match + "<br>";

  if (guide[i].result == "won") {
    text += '<span class="colour-green"><span class="green-circle">W</span>' + guide[i].match + '</span><br>';
  } else if (guide[i].result == "lost") {
    text += '<span class="colour-red"><span class="red-circle">L</span>' + guide[i].match + '</span><br>';
  }
}

document.getElementById("scores").innerHTML = text;

Many Thanks.

yes you can, but it will actually be more or less the same... — Eldshe
– Eldshe, Commented Mar 4, 2021 at 10:46
The result would be the same, and you would just lose the benefits of the for loop. for can be interrupted with break (forEach can't) and you can use await inside it (although in your current code you don't need this). — Jeremy Thille
– Jeremy Thille, Commented Mar 4, 2021 at 10:50

Yuriy Yakym · Accepted Answer · 2021-03-04 11:05:05Z

Consider using DOM api instead of generating raw html.

var guide = [
  {
    result: "won",
    match: "England 2-1 Belgium",
  },
  {
    result: "lost",
    match: "England 0-1 Denmark",
  },
  {
    result: "won",
    match: "England 3-0 Republic of Ireland",
  },
  {
    result: "lost",
    match: "Belgium 2-0 England",
  },
  {
    result: "won",
    match: "England 4-0 Iceland",
  }
];

function createRowElement(game) {
  var rowElement = document.createElement('div');
  var rowClassName = game.result === 'won'
    ? 'row-green'
    : 'row-red';
  rowElement.setAttribute('class', rowClassName);

  var statusCircleElement = document.createElement('span');
  statusCircleElement.setAttribute('class', 'circle');
  statusCircleElement.innerHTML = circleClassName = game.result === 'won'
    ? 'W'
    : 'L';

  var matchNameElement = document.createElement('span');
  matchNameElement.innerHTML = game.match;

  rowElement.appendChild(statusCircleElement);
  rowElement.appendChild(matchNameElement);

  return rowElement;
}

function removeChildren(element) {
  Array.from(element.children).forEach(function(child) {
    child.remove();
  });
}

function renderResults(results) {
  var scoresElement = document.getElementById('scores');

  removeChildren(scoresElement);

  results
    .map(createRowElement)
    .forEach(function(resultElement) {
      scoresElement.appendChild(resultElement);
    });
}

renderResults(guide);

.row-green, .row-red {
  line-height: 2em;
}

.row-green {
  color: green;
}

.row-red {
  color: red;
}

.circle {
  margin-right: 1em;
  border-radius: 50%;
  color: white;
}

.row-green .circle {
  background-color: green;
  padding: 2px 3px;
}

.row-red .circle {
  background-color: red;
  padding: 2px 6px;
}

<div id="scores"></div>

Slavik Salamandyk · Accepted Answer · 2021-03-04 11:08:53Z

var guide = [{
    result: "won",
    match: "England 2-1 Belgium",
  },
  {
    result: "lost",
    match: "England 0-1 Denmark",
  },
  {
    result: "won",
    match: "England 3-0 Republic of Ireland",
  },
  {
    result: "lost",
    match: "Belgium 2-0 England",
  },
  {
    result: "won",
    match: "England 4-0 Iceland",
  }
]

var text = "";

guide.forEach(el => {
  if (el.result == "won") {
    text += '<span class="colour-green"><span class="green-circle">W</span>' + el.match + '</span><br>';
  } else if (el.result == "lost") {
    text += '<span class="colour-red"><span class="red-circle">L</span>' + el.match + '</span><br>';
  }
})

<div class="form-guide">
  <div class="england-form-guide" id="englandFormGuide">
    <p class="scores" id="scores"></p>
  </div>
</div>

Caedmon · Accepted Answer · 2021-03-04 10:58:33Z

1

You could, it won't save you a lot but here you go:

guide.forEach(function(g) {
    text += g.match + "<br>";
    if (g.result == "won") {
        text += '<span class="colour-green"><span class="green-circle">W</span>' + g.match + '</span><br>';
    } else if (g.result == "lost") {
        text += '<span class="colour-red"><span class="red-circle">L</span>' + g.match + '</span><br>';
    }
});

edited Mar 4, 2021 at 10:58

answered Mar 4, 2021 at 10:50

Caedmon

6877 silver badges11 bronze badges

1 Comment

Eldshe Over a year ago

You are lacking the first text adding there

Eldshe · Accepted Answer · 2021-03-04 11:00:51Z

1

Check my comment...

Here is the full readable foreach you want:

guide.foreach ((game,i) => {
   text += game[i].match + "<br>";

   switch(game[i].result){
   case ("won"):
        text += '<span class="colour-green"><span class="green-circle">W</span>' + game[i].match + '</span><br>';
   case ("lost"):
       text += '<span class="colour-red"><span class="red-circle">L</span>' + game[i].match + '</span><br>';
   default: null
   }
})

edited Mar 4, 2021 at 11:00

answered Mar 4, 2021 at 10:51

Eldshe

7436 silver badges20 bronze badges

3 Comments

Caedmon Over a year ago

You should probably reference "game" rather than "guide[i]" in the function.

Aadil Hafesji Over a year ago

@Eldshe What is game?

Eldshe Over a year ago

game is the name I choosed to call any object from your guide array. When you use foreach loop you name the item from the array as you wish

Collectives™ on Stack Overflow

How can I change my For Loop of an Array to forEach?

4 Answers 4

Comments

Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related