CODEWITHSUNDEEP
javascripthtmlfor-loopforeach
Aadil Hafesji
Aadil Hafesji

Reputation: 397

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

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.

Upvotes: 0

Views: 94

Answers (4)

Slavik Salamandyk
Slavik Salamandyk

Reputation: 101

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>

Upvotes: 2

Yuriy Yakym
Yuriy Yakym

Reputation: 3911

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>

Upvotes: 3

Eldshe
Eldshe

Reputation: 743

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
   }
})

Upvotes: 1

Caedmon
Caedmon

Reputation: 687

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>';
    }
});

Upvotes: 1

Related Questions