Callback/function scope in a forEach loop in JavaScript

Question

I discovered dōmo from Jed Schmidt which seems useful for creating server side HTML in node.js.

Basic stuff works but I lack to see how I can use loops like forEach() on arrays to create things like table rows. I created a basic example:

var domo = require('domo');

var fruits = [];
fruits.push("banana", "apple", "peach");

var document = DOCUMENT({type: "html"},
  HTML(
    HEAD(
      TITLE("bla"),
      SCRIPT({src: "/script.js"})
      ),
    BODY(
      TABLE(
        THEAD( TR( TD("Predicate"), TD("Object"))),
        TBODY(
          fruits.forEach(function(value, index) {
            console.log("I am in forEach");
            console.log("Value: "+value);
            console.log("Key: "+index);
            TR(
              TD(index),
              TD(value)
              )
          })
          )
        )

      )
    )).outerHTML;

console.log(document);

This currently results in this output:

<!DOCTYPE html>
<html>
    <head>
        <title>
            bla
        </title>
        <script src="/script.js" type="text/javascript">
</script>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <td>
                        Predicate
                    </td>
                    <td>
                        Object
                    </td>
                </tr>
            </thead>
            <tbody>
                <!--undefined-->
            </tbody>
        </table>
    </body>
</html>

If I get that correctly I cannot access the scope of domo within the forEach loop. Is this the right interpretation and what would be the correct working way to do that?

Solution:

Thanks to the hint from Bergi and a fix by Jed Schmidt this fragment now works (domo >=0.5.5):

TBODY( fruits.map(function(value, index) {
  return TR(
    TD(String(index)),
    TD(value)
    );
}))
)

Bergi · Accepted Answer · 2012-11-13 22:00:27Z

3

forEach returns undefined after having iterated the array.

I don't know whether those functions accept arrays as arguments, but you might try map:

TBODY( fruits.map(function(value, index) {
    console.log("I am in map");
    console.log("Value: "+value);
    console.log("Key: "+index);
    return TR(
//  ^^^^^^ dont forget this
        TD(index),
        TD(value)
    );
}))

edited Nov 13, 2012 at 22:00

answered Nov 13, 2012 at 21:16

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

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

3 Comments

Adrian Gschwend Over a year ago

Thanks, somehow creates my <tr> but fails in domo: TypeError: Object <tr><td></td><td>banana</td></tr> has no method 'replace' at escapeHTML. But map is interesting, didn't know that one. domo docs are a bit sparse right now...

Bergi Over a year ago

Yeah, very sparse... Couldn't find any API docs. If it does not take arrays, your only way out is TBODY.apply(domo, fruits.map(...))

Jed Schmidt Over a year ago

This is correct (just make sure that you're using domo 0.5.4 or later, since you're omitting the attributes for the TR element).

Collectives™ on Stack Overflow

Callback/function scope in a forEach loop in JavaScript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related