Make an iteration more functional in JavaScript / JQuery

Question

I wrote a simple bit of JavaScript to create a HTML table.
It is populated by iterating over an array

var resultSet;
for (var i = 0, i < questions.length;; i++){ 
   ...
    resultSet += '<tr>' + '<td>' + i + '</td><td>' + questions[i].question + '</td><td>' + questions[i].userAnswer + '</td><td>' +
questions[i].correctAnswer + '</td>' + '</tr>';
}

So this an imperative approach. I was reading about Scala where an example to something similar would be:

questions.map(n => '<tr>' + '<td>' + '</td><td>' + questions[i].question  + ...);

Which is a functional. The emphasis being on the what rather than the how.

So I am wondering how to make my JavaScript more functional?

Use of JQuery of course permitted.

Christoph · Accepted Answer · 2013-01-08 10:53:26Z

3

Javascript has Array.forEach however with limited compatibility: While all other browsers support it, IE only supports it from IE9 on - so you might need a shim for the other IEs.

Basically you could write:

questions.forEach(function(a){
resultSet += '<tr><td>' + a.question + '</td><td>' + 
             a.userAnswer + '</td><td>' +
             a.correctAnswer + '</td></tr>';
});

jQuery provides .each() which gives you the same functionality:

$.each(questions, function(index, value) {
  /* Do your stuff*/
});

edited Jan 8, 2013 at 10:53

answered Jan 8, 2013 at 10:46

Christoph

51.4k22 gold badges103 silver badges129 bronze badges

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

1 Comment

dublintech Over a year ago

Does JQuery support something very similar which make allowances for all IE?

Christoph · Accepted Answer · 2013-01-08 12:24:38Z

2

First, correct Scala will be

questions.map(q => '<tr>' + '<td>' + '</td><td>' + q.question  + ...);

where q is an element of questions, not an index.

JavaScript also has map (see Browser Compatibility at the end for browsers which support this method). So it's the same:

questions.map(function(q) { 
  return '<tr>' + '<td>' + '</td><td>' + q.question + ... 
});

edited Jan 8, 2013 at 12:24

Christoph

51.4k22 gold badges103 silver badges129 bronze badges

answered Jan 8, 2013 at 10:42

Alexey Romanov

172k38 gold badges330 silver badges509 bronze badges

2 Comments

Christoph Over a year ago

Javascripts map is for mapping one array to another, not for the purpose the OP wants. Also beware the Compatibility.

Alexey Romanov Over a year ago

@Christoph Same in Scala, so I assumed resultSet was an array.

Collectives™ on Stack Overflow

Make an iteration more functional in JavaScript / JQuery

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related